How can I switch the default opening <div class="accordion-group> if the default is empty?

Question

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>\n\n";

        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>\n\n";

        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>\n\n";

        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?

Answer 1

Brain fart!

Remove class 'in' from id='collapseOne' in PHP code.

Then use jQuery to add the class to the first div with class='accordion-body'

<script>
$( ".accordion-body:first" ).addClass('in');
</script>