I'm having troubles getting my bootstrap accordions to work. The content is all dynamically generated, and I'd like for accordions to be nested within a top level parent accordion - here is the markup:

...
foreach($xml->Continent as $continent) {
   echo "<div class='accordion-group'><div class='accordion-header'><a class='accordion-toggle' data-toggle='collapse'>".$continent['Name']."</a><span>".$continent['Status']."</span></div>";
    foreach($continent->Country as $country) {
       echo "<div class='accordion-body collapse in'><div class='accordion-inner'><div class='accordion-group'><div class='accordion-header'><a class='accordion-toggle' data-toggle='collapse'>".$country['Name']."</a><span>".$country['Status']."</span></div>";
       foreach($country->City as $city) {
         echo "<div class='accordion-body collapse in'><div class='accordion-inner'>".$city['Name']."<span>".$city['Status']."</span></div></div>";
       }
       echo "</div></div></div>";
    }
    echo "</div>";
}
echo "</div>";
...

Basically.. the Continents should all be collapsed at a default state. But once you click and expand a Continent, inside it will list out Countries. Those Countries should also expand out to display Cities, and stop there.

I came a cross a different method before, but it was very fragile code and depended greatly upon the markup, which I don't think is a good route if my content is being dynamically generated and the contents can vary from 1 to many. I really just need to the collapse functionality to work, and if that means creating a script that assigns specific ids, then that works too - I'm just curious as to what the best method would be.

I'm having troubles getting my bootstrap accordions to work. The content is all dynamically generated, and I'd like for accordions to be nested within a top level parent accordion - here is the markup:

...
foreach($xml->Continent as $continent) {
   echo "<div class='accordion-group'><div class='accordion-header'><a class='accordion-toggle' data-toggle='collapse'>".$continent['Name']."</a><span>".$continent['Status']."</span></div>";
    foreach($continent->Country as $country) {
       echo "<div class='accordion-body collapse in'><div class='accordion-inner'><div class='accordion-group'><div class='accordion-header'><a class='accordion-toggle' data-toggle='collapse'>".$country['Name']."</a><span>".$country['Status']."</span></div>";
       foreach($country->City as $city) {
         echo "<div class='accordion-body collapse in'><div class='accordion-inner'>".$city['Name']."<span>".$city['Status']."</span></div></div>";
       }
       echo "</div></div></div>";
    }
    echo "</div>";
}
echo "</div>";
...

Basically.. the Continents should all be collapsed at a default state. But once you click and expand a Continent, inside it will list out Countries. Those Countries should also expand out to display Cities, and stop there.

I came a cross a different method before, but it was very fragile code and depended greatly upon the markup, which I don't think is a good route if my content is being dynamically generated and the contents can vary from 1 to many. I really just need to the collapse functionality to work, and if that means creating a script that assigns specific ids, then that works too - I'm just curious as to what the best method would be.

• php
• javascript
• jquery
• twitter-bootstrap

• 1 Be sure your <div> tags are right. At first glance, I noticed a echo "</div>"; outside of your foreach(). Just a hunch... – Gor Commented Feb 5, 2013 at 20:38
• ah, sorry. that's my fault for not including all of the code. the beginning of that div is echo'd before the Continent foreach. – Harlow Commented Feb 5, 2013 at 21:04
• Ok... no problem. See my answer below. – Gor Commented Feb 6, 2013 at 2:50

1 Answer 1

Ok... the issues are as follows:

• Missing data-parent attribute - e.g. data-parent="#accordion2"
• Missing href attributes - e.g. href="#collapseOne"
• Missing id attributes - e.g. id="collapseOne"

It may not be 100% perfect, but [see my example] and check out Twitter Bootstrap's "Collapse" documentation

• Additional note: Make sure the class 'in' is only included on the cities (e.g. class='accordion-body collapse in'). This makes those nodes expanded at all times. Excluse the 'in' class for nodes you want initially collapsed (continents and countries).