Jquery alt accordion not closing

Question

For various reasons, I created an accordion that has the specified height and overflow: hidden and opens completely on click. However, I can’t make it crash when I click on the desired button.

This is the relevant JS:

$(document).ready( function(){ $('li.ww_slides').addClass('livequery').append('<span class="nav"></span>'); $("li.ww_slides").click(function () { $('li.ww_slides').removeClass('active'); $(this).addClass('active'); $('span.nav').addClass('open').css('bottom','0'); }); $("span.open").click(function () { $(this).parent().removeClass('active'); }); } ); 

This is the css value:

 .ww_main_preview ul li.active { margin-bottom: 10px; padding-bottom: 10px; height: auto!important; } .ww_main_preview ul li.active span.nav { background-position: top center; } .ww_main_preview ul li.livequery { overflow: hidden; height: 76px; margin-bottom: 10px; padding-bottom: 10px; } 

How do I get li.ww_slides to close by clicking the corresponding span.nav.open?

Answer 1

As you change classes in the click handler, you must delegate the event:

 $("li.ww_slides").on("click", "span.open", function() { $(this).parent().removeClass('active'); }); 

Or:

 $(document).ready(function(){ $('li.ww_slides') .addClass('livequery') .append('<span class="nav"></span>') .click(function() { $('li.ww_slides').removeClass('active'); $('span.nav').removeClass('open'); $(this).addClass('active') .find('.nav') .addClass('open') .css('bottom','0'); }).on('click', 'span.open', function(event) { event.stopPropagation(); $(this).parent().toggleClass('active'); }); });