Revert CSS transition on click

Question

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.

You have the onclick handler for the entire operation on the parent container. Why not set .fmore to expand the box and .close-overlay to reset it back to original size? — NetOperator Wibby
– NetOperator Wibby, Commented Aug 5, 2014 at 13:04
@NetOperatorWibby, add your comment as answer. It worked. Thanks :) — Newtt
– Newtt, Commented Aug 5, 2014 at 13:11

NetOperator Wibby · Accepted Answer · 2014-08-05 13:16:19Z

1

Try this on for size!

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

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

answered Aug 5, 2014 at 13:16

NetOperator Wibby

1,4445 gold badges25 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TheFrozenOne · Accepted Answer · 2014-08-05 13:04:04Z

1

 $('.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.

answered Aug 5, 2014 at 13:04

TheFrozenOne

1,7159 silver badges19 bronze badges

Collectives™ on Stack Overflow

Revert CSS transition on click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related