CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Newtt
Newtt

Reputation: 6190

Revert CSS transition on click

I've got a div learn-more that expands to the size of the whole page by adding a CSS class as follows: 

.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 addition is done using JS as follows: 

$('.learn-more').on('click', function(){
    $(this).addClass('clicked');
    $(this).addClass('fire-inside');
});

Now the problem is that I have a button inside the expanded div to reduce the size of this same expanded window.

The JavaScript to do the same is

$('.close-overlay').on('click', function(){
    $('.learn-more-btn').removeClass('clicked');
    $('.learn-more-btn').removeClass('fire-inside');
});

However this doesn't work as the browser is reading the click on close-overlay as a click on learn-more as the HTML for it as 

 <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've added a fiddle for it:

DEMO: http://jsfiddle.net/Newtt/AqV96/

On clicking close, I need the overlay to revert to original size.

Upvotes: 1

Views: 205

Answers (2)

NetOperator Wibby
NetOperator Wibby

Reputation: 1404

Try this on for size!

$(".fmore").on("click", function () {
    $(".learn-more").addClass("clicked");
});

$(".close-overlay").on("click", function () {
    $(".learn-more").removeClass("clicked");
});

Upvotes: 1

TheFrozenOne
TheFrozenOne

Reputation: 1715

 $('.learn-more').on('click', function(){
    if ( $(this).hasClass('clicked') )
       $(this).removeClass('clicked').removeClass('fire-inside');
    else 
       $(this).addClass('clicked').addClass('fire-inside');
});

Just use the same on click event and check if it has class 'clicked'. You could also use toggle function.

Upvotes: 1

Related Questions