Spry Collapsible content working only on one instance

Question

Hoping someone can give me some direction on how to fix this issue. I am using the Spry Collapsible to hide job requirements on my employment page. My employment page gets its data from my database. It can have 0 to 25 entries showing at any given time. I am using the collapsible to save on space. With in each collapsible is also grabbing information from my database. The very first widget that appears comes up just fine. The rest all stay open. I was trying to insert my code for viewing, but it kept coming up showing the table instead of the code. Thanks in advance for any help you can give me.

Answer 1

If you have a look at this example, you will notice that there are 6 collapsible panels each with a unique ID, and there are also 6 constructors, one for each panel.
This is in contrast to what you have got where you have given the same ID to each of your panels as in
<div id="CollapsiblePanel1" class="CollapsiblePanel">
and have a twice repeated constructor as in
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false, enableAnimation:false});
What the constructor does in this instance is target the first occurrance of CollapsiblePanel1
Judging form a repeated error in your markup, I assume that you have a repeat area driven by data from a database of sorts.We need to assign each reapeated area a unique ID with matching constructors.
Within the repeated region, the markup will look like
<div id="CollapsiblePanel<?php echo $recordID; ?>" class="CollapsiblePanel">
where $recordID is the field name of the unique ID of the database record.
The constructors will need to be placed at the bottom of (but within) each repeated region and will look like
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel<?php echo $recordID; ?>", {contentIsOpen:false, enableAnimation:false});
The repeated error is the non-closure of the TD element as in
</tr>
      <td rowspan="6" align="left" valign="top" class="supertext">
</tr>
Being an empty element, you could probably delete all of the above.