Home/ Questions/Q 7557961
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T12:16:08+00:00

As this is my first post here, I would like to thank all of

  • 0

As this is my first post here,
I would like to thank all of you very much for your great support.

Now to the point…

I have 2 accordions in one page.
How can I prevent having 2 accordion tabs expanded?
I mean, if a tab from the first accordion is expanded, I want this tab to be collapsed, when click a tab from the second accordion.

Spent many hours searching over the net and Stack Overflow, but found nothing.

Example Code:

Javascript:

$(function() {
  $( ".myAccordion" ).accordion({
collapsible: true,
active: -1
});
});

Html:

<div>Category One</div>
<div class="myAccordion">
   <h3>Title1</h3>
   <div>Text1</text>
   <h3>Title2</h3>
   <div>Text2</text>
 </div>

<div>Category Two</div>
<div class="myAccordion">
   <h3>Title1</h3>
   <div>Text1</text>
   <h3>Title2</h3>
   <div>Text2</text>
 </div>

I tried adding a changestart option:

changestart: function(event, ui) {
  $('h3.ui-accordion-header').removeClass('ui-state-active ui-corner-top').addClass('ui-state-default ui-corner-all');
  $('div.ui-accordion-content').slideUp();
  $('div.ui-accordion-content').removeClass('ui-accordion-content-active ui-corner-top').addClass('ui-corner-all');
  $('span.ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
}

This does the trick, but only for the first time, a tab is clicked.
When you click that tab for a second time, it doesn’t change at all. You have to click it for a third time to get it expand again.

Any help will be very appreciated.
Thanks again…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After I played a little and didn’t find any solution, I decided to leave ui-accordion and make my own one! I believe that was the best solution to my problem!

    As I didn’t need fancy styling I used this code to achieve the result I needed:

    <body>

 <h1>Category 1</h1>
 <div class="accTabs">
      <a class="accLink" href="#">
        <div class="tab-title">Tab Title</div>
        <div class="tab-slide" style="display:none;">Tab Content to Slide</div>
      </a>
 </div>
 <div class="accTabs">
      <a class="accLink" href="#">
        <div class="tab-title">Tab Title</div>
        <div class="tab-slide" style="display:none;">Tab Content to Slide</div>
      </a>
 </div>

 <h1>Category 2</h1>
 <div class="accTabs">
      <a class="accLink" href="#">
        <div class="tab-title">Tab Title</div>
        <div class="tab-slide" style="display:none;">Tab Content to Slide</div>
      </a>
 </div>
 <div class="accTabs">
      <a class="accLink" href="#">
        <div class="tab-title">Tab Title</div>
        <div class="tab-slide" style="display:none;">Tab Content to Slide</div>
      </a>
 </div>


<script>
$("a.accLink").click(function () {
    var $that = $(this),
        $children = $that.children('div.tab-slide');

    // If expanded tab was clicked, collapse it.
    // >> FIXED LOGIC ERROR >> if ($children.hasClass("slided")) {
    if ($that.hasClass("slided")) {
        $children.slideUp("slow", function () {
            $that.removeClass("slided");
        });
    } else {
        // Collapse all expanded tabs
        // FIXED LOGIC ERROR >> $("div.slided").slideUp("slow", function() {
        $(".slided").find("div.tab-slide").slideUp("slow", function () {
            $(".slided").removeClass("slided");
        });
        // Expand clicked tab
        $children.slideDown("slow", function () {
            $that.addClass("slided");
        });
    }
});
</script>
</body>

    UPDATED SCRIPT: FIXED LOGIC ERRORS TO MAKE 100% FUNCTIONAL

    • 0