New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple accordions without ID #20

Closed
Spone opened this Issue Mar 27, 2017 · 8 comments

Comments

Projects
None yet
3 participants
@Spone

Spone commented Mar 27, 2017

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

This comment has been minimized.

Show comment
Hide comment
@joosebox

joosebox Apr 20, 2017

@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!

joosebox commented Apr 20, 2017

@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 nico3333fr self-assigned this Apr 20, 2017

@nico3333fr

This comment has been minimized.

Show comment
Hide comment
@nico3333fr

nico3333fr Apr 20, 2017

Owner

Hi there,

it is fixed in last commit 6e8c54f , could you test and confirm ?

Thanks for pointing this out,
Nicolas

Owner

nico3333fr commented Apr 20, 2017

Hi there,

it is fixed in last commit 6e8c54f , could you test and confirm ?

Thanks for pointing this out,
Nicolas

@nico3333fr nico3333fr closed this Apr 20, 2017

@Spone

This comment has been minimized.

Show comment
Hide comment
@Spone

Spone Apr 20, 2017

@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!

Spone commented Apr 20, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@nico3333fr

nico3333fr Apr 21, 2017

Owner

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

Owner

nico3333fr commented Apr 21, 2017

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

@Spone

This comment has been minimized.

Show comment
Hide comment
@Spone

Spone Sep 21, 2017

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...

Spone commented Sep 21, 2017

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 nico3333fr reopened this Sep 21, 2017

@nico3333fr

This comment has been minimized.

Show comment
Hide comment
@nico3333fr

nico3333fr Sep 21, 2017

Owner

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

Owner

nico3333fr commented Sep 21, 2017

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

@nico3333fr nico3333fr added the bug label Sep 21, 2017

@nico3333fr

This comment has been minimized.

Show comment
Hide comment
@nico3333fr

nico3333fr Sep 21, 2017

Owner

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

Owner

nico3333fr commented Sep 21, 2017

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

@nico3333fr

This comment has been minimized.

Show comment
Hide comment
@nico3333fr

nico3333fr Sep 21, 2017

Owner

FYI, it is fixed in 38f2fdc ;)

Owner

nico3333fr commented Sep 21, 2017

FYI, it is fixed in 38f2fdc ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment