There is a div named learn-more which expands to fill the whole page when a CSS class is added like this:
.learn-more{
padding:10px;
font-size: 20px;
text-align: center;
margin-top:20px;
font-family: klight;
-webkit-transition:2s;
-moz-transition:2s;
transition:2s;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.clicked{
width:100% !important;
visibility: visible;
height: 600px !important;
margin-top:-111px !important;
z-index: 10;
}
This expansion is triggered using JavaScript in the following way:
$('.learn-more').on('click', function(){
$(this).addClass('clicked');
$(this).addClass('fire-inside');
});
Now, there is a button inside the expanded div that should reduce its size back to normal.
The JavaScript for this action is:
$('.close-overlay').on('click', function(){
$('.learn-more-btn').removeClass('clicked');
$('.learn-more-btn').removeClass('fire-inside');
});
However, this doesn't work properly because the browser registers a click on close-overlay as a click on learn-more, due to the HTML structure:
<div class="learn-more fire-btn">
<p class="fmore">
Find out more
</p>
<div class="inside-text">
<p >
...
</p>
<p class="close-overlay">Close</p>
</div>
</div>
I have provided a demo link here:
DEMO: http://jsfiddle.net/Newtt/AqV96/
When the close button is clicked, the overlay should revert to its original size.