Twitter Bootstrap崩溃无法正确切换

Question

I have the following code:

<div id="container-collapse">
    <div class="row">
         <button type="button" class="span4 btn" data-toggle="collapse" data-target="#demo1" data-parent="container-collapse">Button1</button>
         <button type="button" class="span4 btn btn-danger" data-toggle="collapse" data-target="#demo2" data-parent="container-collapse">Button2</button>
    </div>
    <div class="row">
          <div id="demo1" class="collapse">Foo Bar</div>
          <div id="demo2" class="collapse">Herp Derp</div>
    </div>
</div>

I cannot for the life of me get these collapse elements to toggle, so that when one opens the other closes. Instead what happens is that if you click one button and then the other, both collapse elements remain open. I thought having the data-parent element would help, but no... I am grateful for any pointers.

Answer 1

What you describe you want is called "collapse" or "accordion" in Twitter.Bootstrap. See this jsFiddle that compares this with your solution. The code for the accordion:

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Show Foo Bar
</a>

        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">Foo Bar</div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
           <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Show Herp Derp</a>

        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">Herp Derp</div>
        </div>
    </div>
</div>

To use two buttons in one row:

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div >
            <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Show Foo Bar</a> 
            <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Show Herp Derp</a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">Foo Bar</div>
        </div>
    </div>
    <div class="accordion-group">
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">Herp Derp</div>
        </div>
    </div>
</div>