Question

Here’s my code. The accordion functionality works kind of.

I’d like for the page to open with the 2nd accordion open (class=”in”).

If I click on “Schedule”, it disappears, which is good.
If I click on “ToDo”, it drops down, even though it’s already open. But clicking on it again makes it disappear. Ugh. It’s just not opening with the 2nd panel as the default.

        <div class="accordion" id="myAccordion">
            <div class="accordion-group">
                <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#ToDo"> ToDo </a> </div>
                <div id="ToDo" class="accordion-body collapse" style="height: auto; ">
                    <div class="accordion-inner">
                        This is the first
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#Schedule"> Schedule </a> </div>
                <div id="Schedule" class="accordion-body in collapse" style="height: auto; ">
                    <div class="accordion-inner">
                        this is the second
                    </div>
                </div>
            </div>
        </div>

Answer 1

Try removing the inline styles on #ToDo and #Schedule. Remove the style="height: auto; " from both. Those are overriding the cascading properties of the collapse class.

JSFiddle