javascript - bootstrap Accordion collapse multiple children? - Stack Overflow

admin管理员组

文章数量:1406160

How to create a bootstrap accordion that when collapsed, will collapse two or more "children" accordions? (as opposed to just one as the website demo does below).

.html#collapse

How to create a bootstrap accordion that when collapsed, will collapse two or more "children" accordions? (as opposed to just one as the website demo does below).

http://twitter.github./bootstrap/javascript.html#collapse

• javascript
• twitter-bootstrap
• accordion

Share Improve this question Follow edited Oct 23, 2012 at 7:58 Florent 12.4k1010 gold badges5050 silver badges5858 bronze badges asked Oct 23, 2012 at 5:07 GallaxharGallaxhar 1,03611 gold badge1616 silver badges3030 bronze badges 1

• The collapse plugin can limit the number of accordions opened to 1 only, with the data-parent attribute. Could you be more explicit on how much accordions do you want to open/close and their respective behaviors ? In any case, you can easily bind your own handlers to any collapse event. – Sherbrow Commented Oct 23, 2012 at 17:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

bootstrap accordion with "children" accordion:
http://jsfiddle/MasterAlex/a8pVJ/113/

<div class="accordion" id="accordion1">
<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
            Collapsible Group Item #1 </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
        <div class="accordion-inner">
            collapseOne text
            <div class="accordion" id="accordion2">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneOne">
                            Collapsible SubGroup Item #1 </a>
                    </div>
                    <div id="collapseOneOne" class="accordion-body collapse" style="height: 0px;">
                        <div class="accordion-inner">
                            collapseOneOne text
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneTwo">
                            Collapsible SubGroup Item #2 </a>
                    </div>
                    <div id="collapseOneTwo" class="accordion-body collapse" style="height: 0px;">
                        <div class="accordion-inner">
                            collapseOneTwo text
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOneThree">
                            Collapsible SubGroup Item #3 </a>
                    </div>
                    <div id="collapseOneThree" class="accordion-body collapse">
                        <div class="accordion-inner">
                            collapseOneThree text
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
            Collapsible Group Item #2 </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;">
        <div class="accordion-inner">
            collapseTwo text
        </div>
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree">
            Collapsible Group Item #3 </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
        <div class="accordion-inner">
            collapseThree text
        </div>
    </div>
</div>

本文标签： javascriptbootstrap Accordion collapse multiple childrenStack Overflow