Open one tab at a time in accordion

Question

I have a accordion which is working absolutely fine but what I need is to open only one tab at a time, means when one tab is opened then another tab should be closed.

Currently you can see that we can open all the tabs by clicking on tab links.

Code here

$("#accordion > li > span").click(function() {
  $(this).siblings("div").slideToggle(250);
        $(this).toggleClass("active");

});

Here is the Fiddle

Answer 1

LIVE DEMO

$("#accordion > li > span").click(function() {
    $(this).closest('li').siblings().find('span').removeClass('active').next('div').slideUp(250);
    $(this).toggleClass("active").next('div').slideToggle(250);
});

---

Or like: LIVE DEMO

$("#accordion > li > span").click(function() {
    $(this).toggleClass("active").next('div').slideToggle(250)
    .closest('li').siblings().find('span').removeClass('active').next('div').slideUp(250);
});

Answer 2

You can also close other accordions by adding a beforeActivate callback:

$( ".myAccordion" ).accordion({
      collapsible: true,
      active: false,
    heightStyle: "content",
    beforeActivate: function(event, ui) {
   $( ".myAccordion" ).not(this).accordion('option', 'active', false);
}