Collapse plugin: Only show one panel at a time

17,866

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

Change

data-parent="monogram-acc"

to

data-parent="#monogram-acc"
Share:
17,866
Gabriel Alack
Author by

Gabriel Alack

Updated on August 20, 2022

Comments

  • Gabriel Alack
    Gabriel Alack almost 2 years

    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/