jquery alt accordion not closing

Question

For a variety of reasons I've created an accordion that has a specified height & overflow:hidden and opens full on click. I can't, however, get it to collapse when I click on the required 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 relevant css:

.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 the li.ww_slides to close on click of the relevant span.nav.open?

Answer 1

As you are changing classes in a click handler, you should 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');
          });
});