CODEWITHSUNDEEP
twitter-bootstrapaccordionjquery-ui-accordion
Katve
Katve

Reputation: 328

Twitter Bootstrap's accordion and multiple children

How to expand/show multiple children? Currently Service2 is not shown.

<div class="accordion" id="accordion1">
<div class="accordion-group">
    <div class="accordion-heading">
        <div class="accordion-toggle group-accordion-toggle">
            <a href="#collapseOne" data-parent="#accordion1"
               data-toggle="collapse" class=""><i
                    class="icon-plus"></i></a>
            <a href="http://www.example.com">Operator</a>
        </div>
    </div>

    <div id="collapseOne" class="accordion-body collapse">
        <div class="accordion-inner"><a
                href="http://www.example.com/service1">Service1</a></div>
    </div>

    <div id="collapseOne" class="accordion-body collapse">
        <div class="accordion-inner"><a
                href="http://www.example.com/service2">Service2</a></div>
    </div>

</div>

http://jsfiddle.net/mejo/CXDC8/

Upvotes: 0

Views: 625

Answers (1)

Simon Adcock
Simon Adcock

Reputation: 3562

Could you not just remove the <div id="collapseOne" class="accordion-body collapse"> container from Section2?

    <div id="collapseOne" class="accordion-body collapse">

        <div class="accordion-inner"><a
                href="http://www.example.com/service1">Service1</a>
        </div>

        <div class="accordion-inner"><a
                href="http://www.example.com/service2">Service2</a>
        </div>
    </div>

Here's a JSFiddle illustrating what I mean.

Also, it's bad practice to have two elements with same ID, and may cause issues further down the road.

Upvotes: 1

Related Questions