Multiple jQuery accordions?

[Mike Anthony]

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]

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]

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]

Hello Ankit

I have the following snippet from my .js file:

    
$(function() {
$("#accordion").accordion({
		collapsible: true,
		autoHeight: false
});
});

Then this snippet is from my .jsp file:

    
<div class="customizedForm">
  <div id="accordion">
	<h3><a href="#">Accordion1</a></h3>
	<div>
    
    <label>Test label1
      <html-el:text title="Test Label1"
        styleId="testLabel1"
        styleClass="control" 
        property="TesTLabel1String" 
        maxlength="14" />
    </label>
         
  </div>
  </div>

  <div id="accordion">
	<h3><a href="#">Accordion2</a></h3>
	<div>

    <label>Test label2
      <html-el:text title="Test Label2"
        styleId="testLabel2"
        styleClass="control" 
        property="TesTLabel2String" 
        maxlength="14" />
    </label>
    
  </div>
  </div>  
</div>

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]

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:

    
<html:form action="/someAction.do" method="post" readonly="${readOnly}" styleId="someForm">
  
  <div id="tabs" class="someClass">
    <ul>
        <li><a href="#tabs-1" >Tab1</a></li>
        <li><a href="#tabs-2" >Tab2</a></li>
        <li><a href="#tabs-3" >Tab3</a></li>
    </ul>
    <div id="tabs-1">
        <p><%@include file="MyTestTab.jsp"%></p>
    </div>
    <div id="tabs-2">
        <p><%@include file="SomeOther.jsp"%></p>
    </div>
    <div id="tabs-3">
        <p><%@include file="StillAnother.jsp"%></p>
    </div>
  </div>

</html:form>

However, I assume this should be perfectly acceptable to use accordions inside of a tab component.

[Mike Anthony]

Thanks Bear, that looks like the problem. both accordions have the same ID.
Thank you!
--Mike

[Mike Anthony]

I guess my question is slightly different then....

I had put the following in a separate .js file

   
$("#accordion").accordion({
		collapsible: true,
		autoHeight: false
});
 

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]

Try to use a matcher like this $(".accordion") or anything that can be mapped to more than one element...

[Bear Bibeault]

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]

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!