• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Multiple jQuery accordions?

 
Mike Anthony
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have been trying, unsuccesfully, to add multiple jQuery accordions to the same page. The first accordion works properly but any subsequent show as static text.
From searching the web I could not find anyway to add multiple accordions; however, I did see many people with similar questions as to how to implement this.
Simple question first: Is it possible to have more than one jQuery accordion per page?
Thank you,
--A jQuery novice
 
Ankit Garg
Sheriff
Posts: 9520
22
Android Google Web Toolkit Hibernate IntelliJ IDE Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Mike, welcome to javaranch!
I had once implemented multiple accordions on my page using jQuery. Can you show us the code so that we can tell you the problem...
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64833
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I just tested putting two accordions on one page using jQuery UI 1.7.2 with jQuery 1.3.2 and had no issues.

Make sure you are not creating elements with the same id more than once on the page.
 
Mike Anthony
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello Ankit

I have the following snippet from my .js file:



Then this snippet is from my .jsp file:



The first accordion displays correctly however the second does not. It is displayed as static text.

Hopefully I am missing something simple as this is my first foray into jquery...

Thank you,
--Mike
 
Mike Anthony
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Also I am not sure if this may be causing the conflict but my jsp is actually part of a tab using the jQuery tab component as shown below:



However, I assume this should be perfectly acceptable to use accordions inside of a tab component.
 
Mike Anthony
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Bear, that looks like the problem. both accordions have the same ID.
Thank you!
--Mike
 
Mike Anthony
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I guess my question is slightly different then....

I had put the following in a separate .js file



with the intention of including this .js file in mutliple pages that may each have multiple accordions on them.

This however apparently only takes the first element where ID="accordion" - how would I set this up so that I could include the .js file and set each different accordion?
What I do not want to have to do is to include the names of each individual accordion in the above code. Can I associate the above to a class rather than an ID? I tried that without much success however this is all rather new to me.
 
Ankit Garg
Sheriff
Posts: 9520
22
Android Google Web Toolkit Hibernate IntelliJ IDE Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Try to use a matcher like this $(".accordion") or anything that can be mapped to more than one element...
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64833
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
id values are strong juju, and should only be used to identify individual elements. As Ankit pointed out, to add an element to a general class of elements for selection, assigning a class to the elements is exactly what the class attribute was intended for.

jQuery also gives you many other ways to make selections. Learn to not rely upon the id quite so much
 
Mike Anthony
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks for all of the help!

I was actually trying to use the accordion to implement collapsible fieldsets (I only had one member in each accordion)

I eventually found a better solution here: Collapsible fieldsets

This works well for my needs and it works great using the class element for adding the functionality.

Thanks again for all fo the help!
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic