I have the following Bootstrap (2.3.2) code on a PHP page:
<div class="accordion" id="accordionX">
<?php
if (!empty($section1)) {
echo '
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" data-parent="#accordionX" data-toggle="collapse" href="#collapseOne"><strong>heading 1</strong></a></div>
<div class="accordion-body collapse in" id="collapseOne">
<div class="accordion-inner">';
echo "<p>$something</p>
";
echo '</div>
</div>
</div>';
}
if (!empty($section2)) {
echo '
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" data-parent="#accordionX" data-toggle="collapse" href="#collapseTwo"><strong>heading 2</strong></a></div>
<div class="accordion-body collapse" id="collapseTwo">
<div class="accordion-inner">';
echo "<p>$something_else</p>
";
echo '</div>
</div>
</div>';
}
if (!empty($section3)) {
echo '
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" data-parent="#accordionX" data-toggle="collapse" href="#collapseThree"><strong>heading 3</strong></a></div>
<div class="accordion-body collapse" id="collapseThree">
<div class="accordion-inner">';
echo "<p>$something_else_entirely</p>
";
echo '</div>
</div>
</div>';
}
?>
</div>
If the first two accordions are empty and do not display, how can I use jQuery so that the last accordion defaults to open/expanded with the relevant 'in' class applied?