[RESOLVED] Spry Collapsible content working only on one instance

[Sabz]

Hey there,

yet another web developer in the making thanks to the wonderful world of information sharing that is the internet. still coming to grasp with XHTML and CSS although i can't complain the learning curve is catching up. had a small taste of javascripting while in college but unfourtianatly sill a noob so i come to you here after hours of hair pulling... give it a look its probably sthg very simple i'm missing:confused:

i'm currently working on a web dev project and have decided to use the spry collapsible content script using dreamweaver CS4 as it suits my needs however i'm not sure how it degrades for people with javascript turned off, could some1 shed some light on that?

Now the actual problem is i can't seem to have multiple instances of the script working on one page...the site is still local and not online soo ill provide code.
the page has several ul's (4; 2 on each column) which are quite long and i would like to have them collapsible using JavaScript so far the first ul is working but the rest are not functional for some reason or the other, heres the code, ive removed the actual ul content so its easier to read



<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Products</div>
<div class="CollapsiblePanelContent">
<ul id="productslist">

// LIST ONE

</ul>
</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
-->
</script>



<p>&nbsp;</p>

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Services</div>
<div class="CollapsiblePanelContent">

<ul id="productslist">
//LIST TWO
</ul>

</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
-->
</div>
</script>

Hope that was enough, agian the problem is that the LIST ONE works, but the rest don't (in this case just LIST TWO)

another method for achieve this result is not entirely out of the question, i'm aware it could be achieved with CSS aswell but i'm not sure how as of yet..
many thanks for you input and help

[dtm32236]

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Products</div>
<div class="CollapsiblePanelContent">
<ul id="productslist">

// LIST ONE

</ul>
</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
-->
</script>



<p>&nbsp;</p>

<div id="CollapsiblePanel2" class="CollapsiblePanel"> <!-- new ID -->
<div class="CollapsiblePanelTab" tabindex="0">Services</div>
<div class="CollapsiblePanelContent">

<ul id="productslist">
//LIST TWO
</ul>

</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2"); <!-- notice the new name -->
-->
</div>
</script>

that should work now...

[Sabz]

excellent man .. thanks a lot ! that worked flawlessly

[dtm32236]

awesome - no problem.