jQuery in Action, 2nd edition*
The moose likes HTML, CSS and JavaScript and the fly likes Multiple jQuery accordions? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Multiple jQuery accordions?" Watch "Multiple jQuery accordions?" New topic
Author

Multiple jQuery accordions?

Mike Anthony
Greenhorn

Joined: Jul 06, 2009
Posts: 11
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

Joined: Aug 03, 2008
Posts: 9291
    
  17

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


SCJP 6 | SCWCD 5 | Javaranch SCJP FAQ | SCWCD Links
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60804
    
  65

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.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Mike Anthony
Greenhorn

Joined: Jul 06, 2009
Posts: 11
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

Joined: Jul 06, 2009
Posts: 11
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

Joined: Jul 06, 2009
Posts: 11
Thanks Bear, that looks like the problem. both accordions have the same ID.
Thank you!
--Mike
Mike Anthony
Greenhorn

Joined: Jul 06, 2009
Posts: 11
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

Joined: Aug 03, 2008
Posts: 9291
    
  17

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

Joined: Jan 10, 2002
Posts: 60804
    
  65

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

Joined: Jul 06, 2009
Posts: 11
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!
 
wood burning stoves
 
subject: Multiple jQuery accordions?
 
Similar Threads
present data in collasible and expandible format.
How can I align elements that are in different <div>'s?
jquery accordion and tabs on the same page
have two tables I am trying to use jquery accordion effect on
accordion in struts2-jquery-plugin-2.1.0 not working