Twitter accordion reset feature

Question

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

Currently both divs can be extended at the same time.

The way I would like them to work, so that only one div can be expanded at a time. For instance. if #about is expanded and the user clicks #videos, #about will be minimized 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 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

I managed to get it to work following the bootstrap example. I had to use the data parent tag instead of the data target.

Here is a 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 -->