Twitter Bootstrap手風琴折疊功能

Question

我正在使用twitter bootstrap css和js框架。 在此示例中，我有兩個可折疊的div和。

目前，兩個div可以同時擴展。

我希望他們的工作方式是一次只能擴展一個div。 例如，如果#about展開並且用戶單擊#videos，則#about將折疊，而#videos將在其位置展開。

是否有捷徑可尋？

<div id="main" class="span12">
      <div class="row">

         <div class="span4">
            <a href="#" data-target="#about" data-toggle="collapse">
                <div class="unit red bloat">
                   <h3>About</h3>
                     <p>A Melbourne based social clan who enjoy a range of MMO, RTS and action based titles. Take a look at what we're all about.</p>

                </div>
            </a>
         </div>

         <div class="span4">
            <a href="#" data-target="#videos" data-toggle="collapse">
                <div class="unit red bloat">
                   <h3>Videos</h3>
                    <p>A selection of our best videos, of both the good times and the bad. Due to the poor nature of it's content, viewer discretion is advised and should not be viewed by anyone. </p>

                </div>
            </a>
         </div>

         <div class="span4">
            <a href="forums/index.php">
                 <div class="unit grey bloat">
                <h3>Forum</h3>
                  <p>If you think you'd fit in here, click this box and sign up to our forum. </p>

                 </div>
            </a>
         </div>

</div><!-- end row -->

            <br />
            <br />

             <div class="row-fluid">
                <div class="span12">

                <!-- start accord -->

        <div id="about" class="collapse">
            <div class="row-fluid">
                <div class="expanded">
                    <p>about</p>
                </div>
            </div>
        </div>

        <div id="videos" class="collapse">
            <div class="row-fluid">
                <div class="expanded">
                    <p>vid</p>
                </div>
            </div>
        </div>



                <!-- end accord -->

                </div>
            </div>






      <hr><!-- Bottom border -->



    </div> <!-- /container -->

Answer 1

通過遵循引導程序示例，我能夠使其工作。 必須使用data-parent標簽而不是data-target。

這是工作示例；

<div id="main" class="span12">
    <div class="row">
        <div class="span4">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                <div class="unit grey bloat">
                    <h3>Heading 1</h3>
                    <p>Paragraph 1</p>
                </div>
            </a>
        </div>
        <div class="span4">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                <div class="unit grey bloat">
                    <h3>Heading 2</h3>
                    <p>Paragraph 2</p>
                </div>
            </a>
        </div>
        <div class="span4">
            <a href="#">
                <div class="unit grey bloat">
                    <h3>Heading 3</h3>
                    <p>Paragraph 3</p>
                </div>
            </a>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12"> 
            <div class="accordion" id="accordion2">
                <div class="accordion-group">
                    <div id="collapseOne" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="expanded">
                                <p>Expanded 1</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                    <div id="collapseTwo" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <div class="expanded">
                                <p>Expanded 2</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> <!-- /container -->