javascript - Twitter bootstrap accordion collapse function - Stack Overflow

admin管理员组

文章数量:1355045

I am using twitter bootstrap css and js frameworks. In this example I have two collapsible divs, and .

Currently both divs can be expanded at the same time.

The way I would like them to work is so only one div can be expanded at a time. E.g. if #about is expanded and the user clicks #videos, #about will be collapsed and #videos will be expanded in its place.

Is there an easy way to do this?

<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 -->

I am using twitter bootstrap css and js frameworks. In this example I have two collapsible divs, and .

Currently both divs can be expanded at the same time.

The way I would like them to work is so only one div can be expanded at a time. E.g. if #about is expanded and the user clicks #videos, #about will be collapsed and #videos will be expanded in its place.

Is there an easy way to do this?

<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 -->

• javascript
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Aug 23, 2012 at 10:37 pjmilpjmil 2,09788 gold badges2525 silver badges4242 bronze badges 2

• What version of Bootstrap are you using? – João Silva Commented Aug 23, 2012 at 10:40
• 1 Examing the code hereon their example: twitter.github./bootstrap/javascript.html#collapse it seems they have quite a few classes such as 'accordion' etc on their elements that aren't present in your code. Not sure if these are 100% needed but might be worth a look. – Billy Moat Commented Aug 23, 2012 at 11:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I was able to make it work by following the bootstrap example. Had to use the data-parent tag instead of data-target.

Here is the working example;

<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 -->

本文标签： javascriptTwitter bootstrap accordion collapse functionStack Overflow