CODEWITHSUNDEEP
jquery
Will Zee
Will Zee

Reputation: 1

JQuery Accordion, when you collapse one accordion, they all collapse. I would like it would only collapse the targeted accordion

I have JQuery code for an accordion, everything works great but when you close one accordion, all the accordions close? I want it so it will only close the one accordion if they click to close it. Suggestions?

jQuery(document).ready(function() {
  jQuery('.uc_shadow_accordion .uc_trigger-{{uc_id}}:first').addClass('active').next().show();
  jQuery('.uc_shadow_accordion .uc_trigger-{{uc_id}}').click(function() {
    if (jQuery(this).next().is(':hidden')) {
      jQuery(this).toggleClass('active').next().slideDown();
    } else {
      jQuery('.uc_shadow_accordion .uc_trigger-{{uc_id}}').removeClass('active').next().slideUp();
    }
    return false;
  });
});

Upvotes: 0

Views: 24

Answers (1)

Karan
Karan

Reputation: 12629

Update your else part. use jQuery(this).removeClass('active').next().slideUp();. So it will only close selected element.

jQuery('.uc_shadow_accordion .uc_trigger-{{uc_id}}') will select all accordions that is why it was closing all.

jQuery(document).ready(function() {
  jQuery('.uc_shadow_accordion .uc_trigger-{{uc_id}}:first').addClass('active').next().show();
  jQuery('.uc_shadow_accordion .uc_trigger-{{uc_id}}').click(function() {
    if (jQuery(this).next().is(':hidden')) {
      //jQuery(this).toggleClass('active').next().slideDown();

      // You should use .addClass() instead of .toggleClass()
      // because when you click and it is already hidden then you want to make it active.
      // .toggleClass() will also work but it may cause conflicts.
      jQuery(this).addClass('active').next().slideDown();
    } else {
      jQuery(this).removeClass('active').next().slideUp();
    }
    return false;
  });
});

Upvotes: 1

Related Questions