Put Accordion in Accordion
Description
The following code shows how to put Accordion in Accordion.
Example
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
</head><!--from w w w. jav a2 s .c o m-->
<body>
<div class="accordion" id="accordion1">
<!-- Element Group Heading -->
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion1" href="#collapse1"> <b>Element
Group 1</b>
</a>
</div>
<!-- Elements -->
<div id="collapse1" class="accordion-body collapse">
<!-- -->
<div class="accordion" id="accordion1-1">
<div class="accordion-heading" style="margin-left: 30px">
<label class="radio" class="accordion-toggle"
data-toggle="collapse" data-parent="#accordion1-1"
data-target="#collapseOne1-1"> <input type="radio"
name="optionsCheckboxList" value="1" />Element One
</label>
</div>
<div id="collapseOne1-1" class="accordion-body collapse">
<div class="accordion-inner" style="margin-left: 60px">
<!-- Sample Description -->
<input type="radio" name="selComment" value="descName"
onclick="populateComment(this.value)" />${desc1.name}<br />
</div>
</div>
</div>
<!-- -->
<div class="accordion" id="accordion1-2">
<div class="accordion-heading" style="margin-left: 30px">
<label class="radio" class="accordion-toggle"
data-toggle="collapse" data-parent="#accordion1-2"
data-target="#collapseOne1-2"> <input type="radio"
name="optionsCheckboxList" value="2" />Element Two
</label>
</div>
<div id="collapseOne1-2" class="accordion-body collapse">
<div class="accordion-inner" style="margin-left: 60px">
<!-- Sample Description -->
<input type="radio" name="selComment" value="descName"
onclick="populateComment(this.value)" />${desc1.name}<br />
</div>
</div>
</div>
<!-- -->
</div>
<!-- Element Group Heading -->
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion2" href="#collapse2"> <b>Element
Group 2</b>
</a>
</div>
<!-- Elements -->
<div id="collapse2" class="accordion-body collapse">
<!-- -->
<div class="accordion" id="accordion2-1">
<div class="accordion-heading" style="margin-left: 30px">
<label class="radio" class="accordion-toggle"
data-toggle="collapse" data-parent="#accordion2-1"
data-target="#collapseOne2-1"> <input type="radio"
name="optionsCheckboxList" value="1" />Element One
</label>
</div>
<div id="collapseOne2-1" class="accordion-body collapse">
<div class="accordion-inner" style="margin-left: 60px">
<!-- Sample Description -->
<input type="radio" name="selComment" value="descName"
onclick="populateComment(this.value)" />${desc1.name}<br />
</div>
</div>
</div>
<!-- -->
<div class="accordion" id="accordion2-2">
<div class="accordion-heading" style="margin-left: 30px">
<label class="radio" class="accordion-toggle"
data-toggle="collapse" data-parent="#accordion2-2"
data-target="#collapseOne2-2"> <input type="radio"
name="optionsCheckboxList" value="2" />Element Two
</label>
</div>
<div id="collapseOne2-2" class="accordion-body collapse">
<div class="accordion-inner" style="margin-left: 60px">
<!-- Sample Description -->
<input type="radio" name="selComment" value="descName"
onclick="populateComment(this.value)" />${desc1.name}<br />
</div>
</div>
</div>
<!-- -->
</div>
</div>
</body>
</html>