Multiple accordions without ID

[Spone]

Hello,

I had an issue when using multiple accordions on the same page, without giving them IDs. In this case, whenever I clicked on an accordion item, it opened the corresponding item in the first accordion on the page.

Adding IDs solved the issue.

If IDs are mandatory, maybe the plugin could add generate them when it is instantiated.

Thanks

[joosebox]

@Spone Hi I'm having the same issue currently. Where did you add the IDs? Was it somewhere in the initial code:

<div class="js-accordion" data-accordion-prefix-classes="your-prefix-class">
 <div class="js-accordion__panel">
   <h2 class="js-accordion__header">First tab</h2>
   <p>Content of 1st tab</p>
 </div>
 <div class="js-accordion__panel">
   <h2 class="js-accordion__header">Second tab</h2>
   <p>Content of 2nd tab</p>
 </div>
 <div class="js-accordion__panel">
   <h2 class="js-accordion__header">Third tab</h2>
   <p>Content of 3rd tab</p>
 </div>
</div>

or what it gets transformed into:

<div class="your-prefix-class" 
   data-accordion-prefix-classes="your-prefix-class"
   role="tablist" aria-multiselectable="true">

 <button id="accordion1_tab1" 
     class="js-accordion__header your-prefix-class__header" 
     aria-controls="accordion1_panel1" aria-expanded="false" 
     role="tab" aria-selected="true">
       First tab
 </button>

 <div id="accordion1_panel1" 
     class="js-accordion__panel your-prefix-class__panel" 
     aria-labelledby="accordion1_tab1" 
     role="tabpanel" aria-hidden="true">

   <h2 class="your-prefix-class__title" tabindex="0">First tab</h2>
   <p>Content of 1st tab</p>

 </div>
 … etc…
</div>

Thanks so much in advance!

[nico3333fr]

Hi there,

it is fixed in last commit https://github.com/nico3333fr/jquery-accessible-accordion-aria/commit/6e8c54ff4555411706158e067fdc72f4897dc682 , could you test and confirm ?

Thanks for pointing this out, Nicolas

[Spone]

@joosebox I fixed it by adding the ID in JS before calling accordion():

$(function () {
    $('.js-accordion').each(function(i){
        $(this).attr('id', 'js-accordion_' + i).accordion();
    });
});

@nico3333fr thanks!

[nico3333fr]

Okay, so let's consider this one is fixed :)

[Spone]

I'd like to reopen this issue: the ID is added but, all accordions on the page have the same ID : accordion-0 so it does not fix the issue...

[nico3333fr]

Yes, I've made a mistake in it, I'm fixing it right now...

[nico3333fr]

@Spone Ok, now it is fixed, I've added a random string instead of the index.

[nico3333fr]

FYI, it is fixed in https://github.com/nico3333fr/jquery-accessible-accordion-aria/commit/38f2fdc5631cc427c17562b0b77a62862e5b10d9 ;)