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