jQuery - Changing Div Height On Click/Unclick

Question

Creating an accordion style menu. On click the accordion div opens and animates great. That all works just fine. However after expanded the hidden div I want the title div to shrink slightly and then as the accordion div is collapsed have it revert to the original size.

I have a JSFiddle setup. Essentially need to correct the second click to revert the div height back to original. The first click is functioning correctly and adding the class and animating the height change. However the second click isn't recognized.

What simple thing am I overlooking?

$(function() { 
$(".click").on('click', function(){
$(".animate").animate({height: '50px',},"slow");
    $(this).addClass("expanded");
});

$(".click.expanded").on('click', function(){
$(".animate").animate({height: '100px',},"slow");
    $(this).removeClass("expanded");
});

});

score 1 · Answer 1 · edited May 23 '17 at 12:30

The issue is that your click item doesn't have the expanded class at start, so your binding isn't working.

You should being doing something like:

$(document).on('click','.click.expanded',function(){//event work});

To address the comments, yes you need to handle the original event, you can do this using the .not selector so that the first event doesn't fire.

$(document).on('click','.click:not(.expanded)', function()

In the end, your code could look something like this:

$(function() { 
    $(document).on('click','.click:not(.expanded)', function(){
            $(".animate").animate({height: '50px',},"slow");
            $(this).addClass("expanded");
    });

    $(document).on('click',".click.expanded", function(){
        $(".animate").animate({height: '100px',},"slow");
        $(this).removeClass("expanded");
    });
});

Obligatory Fiddle

This question Event binding on dynamically created elements?, even though about dynamic elements, addresses your problem.

This won't work, you're correct about event delegation, but neglect the fact the original event would still be fired. http://jsfiddle.net/ecLxkgj9/5/ — Curtis, Jul 30 '15 at 15:50
@Curt you are correct, I've updated my answer appropriately. — JasonWilczak, Jul 30 '15 at 15:55

score 0 · Accepted Answer · edited May 23 '17 at 12:13

As @JasonWilczak has stated the problem you have is that you don't have any elements on load which will have the expanded class, and therefore they won't be assigned this click event handler.

However you will still have a problem if you use event delegation as the original click event handler will still be fired also.

A cleaner solution would be to only have one click event handler, and detect the expanded class within the callback.

Dependant on the expanded class being present run different logic conditionally.

$(".click").on('click', function(){

   if (!$(this).hasClass("expanded")){
      $(".animate").animate({height: '50px',},"slow");
      $(this).addClass("expanded");
   }
   else {
      $(".animate").animate({height: '100px',},"slow");
      $(this).removeClass("expanded");
   }

});

I've updated your jsFiddle to demonstrate this:

http://jsfiddle.net/ecLxkgj9/4/

score 0 · Answer 3 · answered Jul 30 '15 at 16:16

Here is the updated fiddle

$(".click").on('click', function(){

if (!$(this).hasClass("expanded")){
  $(".animate").animate({height: '50px',},"slow");
 }
else {
  $(".animate").animate({height: '100px',},"slow");
  }

$(this).toggleClass("expanded");

});

jQuery - Changing Div Height On Click/Unclick

3 Answers3