响应手风琴问题

Question

I'm in the process of modifying a responsive tabs to accordion, please see the jsfiddle

When the current 'active' tab is clicked it hides which I understand is what it is meant to do in the code, however I would like it if this does not happen and doesn't hide. Here is the current javascript:

$('#nav').children('li').first().children('a').addClass('active')
        .next().addClass('is-open').show();

$('#nav').on('click', 'li > a', function() {

      if (!$(this).hasClass('active')) {

        $('#nav .is-open').removeClass('is-open').hide();
        $(this).next().toggleClass('is-open').toggle();

        $('#nav').find('.active').removeClass('active');
        $(this).addClass('active');
      } else {
        $('#nav .is-open').removeClass('is-open').hide();
        $(this).removeClass('active');
      }
});

It's basically just applying classes dependent on what is clicked and what is currently active or not. I guess I need to change the logic of this?

Answer 1

If what I understood is correct that you want to stop hiding the active div when clicked again. Just remove the else part...

$('#nav').children('li').first().children('a').addClass('active')
        .next().addClass('is-open').show();

$('#nav').on('click', 'li > a', function() {

      if (!$(this).hasClass('active')) {

        $('#nav .is-open').removeClass('is-open').hide();
        $(this).next().toggleClass('is-open').toggle();

        $('#nav').find('.active').removeClass('active');
        $(this).addClass('active');
      }
});

Check this Fiddle