Search code examples
twitter-bootstrapaccordion

Collapse plugin: Only show one panel at a time


I'm having a hard time figuring this out, and maybe I'm just not searching the right terms.

I have a regular twitter collapse panel. I only want it to show one panel at a time.

By default, it allows you to open all of the panels at once, but I want it to automatically close any other open panel when you expand another one.

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

<div class="accordion" id="monogram-acc">

<div class="accordion-group">
    <div class="accordion-heading">
    <div class="accordion-toggle" data-toggle="collapse" data-parent="monogram-acc" href="#Animals">
        Animals
    </div>
</div>
    <div class="accordion-body collapse" id="Animals">
        //... content
    </div>
</div>

<div class="accordion-group">
    <div class="accordion-heading">
        <div class="accordion-toggle" data-toggle="collapse" data-parent="monogram-acc" href="#Food">
            Food
        </div>
    </div>
    <div class="accordion-body collapse" id="Food">
        // ... content
    </div>
</div>
//... so on
</div>

http://jsfiddle.net/AbtmY/


Solution

  • http://jsfiddle.net/AbtmY/1/

    Change

    data-parent="monogram-acc"
    

    to

    data-parent="#monogram-acc"