Skip to content

Instantly share code, notes, and snippets.

@jamc92

jamc92/nestedBoostrapAccordeon.html

Created April 21, 2015 14:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamc92/073fac6eb2ee37eb4e31 to your computer and use it in GitHub Desktop.
Save jamc92/073fac6eb2ee37eb4e31 to your computer and use it in GitHub Desktop.
Download ZIP
Nested Bootstrap Accordeon
Raw
nestedBoostrapAccordeon.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Bootstrap Accordeon</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion1" href="#accordion1collapseOne">
Item #1
</a></h4>
</div>
<div id="accordion1collapseOne" class="panel-body collapse">
<div class="panel-inner">
Here we insert another nested accordion
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion1" href="#accordion1collapseInnerOne">
Producto #1.1
</a></h4>
</div>
<div id="accordion1collapseInnerOne" class="panel-body collapse">
<div class="panel-inner">
Detalle #1.1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion1" href="#accordion1collapseInnerTwo">
Producto #2.1
</a></h4>
</div>
<div id="accordion1collapseInnerTwo" class="panel-body collapse">
<div class="panel-inner">
Detalle #2.1
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#accordion2collapseOne">
Item #2
</a></h4>
</div>
<div id="accordion2collapseOne" class="panel-body collapse">
<div class="panel-inner">
<!-- Here we insert another nested accordion -->
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#accordion2collapseInnerOne">
Producto #3.1
</a></h4>
</div>
<div id="accordion2collapseInnerOne" class="panel-body collapse">
<div class="panel-inner">
Detalle #3.1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion2" href="#accordion2collapseInnerTwo">
Producto #3.2
</a></h4>
</div>
<div id="accordion2collapseInnerTwo" class="panel-body collapse">
<div class="panel-inner">
Detalle #3.2
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion3" href="#accordion3collapseOne">
Item #3
</a></h4>
</div>
<div id="accordion3collapseOne" class="panel-body collapse">
<div class="panel-inner">
<!-- Here we insert another nested accordion -->
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion3" href="#accordion3collapseInnerOne">
Producto #4.1
</a></h4>
</div>
<div id="accordion3collapseInnerOne" class="panel-body collapse">
<div class="panel-inner">
Detalle #4.1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion3" href="#accordion3collapseInnerTwo">
Producto #4.2
</a></h4>
</div>
<div id="accordion3collapseInnerTwo" class="panel-body collapse">
<div class="panel-inner">
Detalle #4.2
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion4" href="#accordion4collapseOne">
Item #4
</a></h4>
</div>
<div id="accordion4collapseOne" class="panel-body collapse">
<div class="panel-inner">
<!-- Here we insert another nested accordion -->
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion4" href="#accordion4collapseInnerOne">
Producto #5.1
</a></h4>
</div>
<div id="accordion4collapseInnerOne" class="panel-body collapse">
<div class="panel-inner">
Detalle #5.1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion4" href="#accordion4collapseInnerTwo">
Producto #5.2
</a></h4>
</div>
<div id="accordion4collapseInnerTwo" class="panel-body collapse">
<div class="panel-inner">
Detalle #5.2
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion5" href="#accordion5collapseOne">
Item #5
</a></h4>
</div>
<div id="accordion5collapseOne" class="panel-body collapse">
<div class="panel-inner">
<!-- Here we insert another nested accordion -->
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion5" href="#accordion5collapseInnerOne">
Producto #6.1
</a></h4>
</div>
<div id="accordion5collapseInnerOne" class="panel-body collapse">
<div class="panel-inner">
Detalle #6.1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion5" href="#accordion5collapseInnerTwo">
Producto #6.2
</a></h4>
</div>
<div id="accordion5collapseInnerTwo" class="panel-body collapse">
<div class="panel-inner">
Detalle #6.2
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion6" href="#accordion6collapseOne">
Item #6
</a></h4>
</div>
<div id="accordion6collapseOne" class="panel-body collapse">
<div class="panel-inner">
<!-- Here we insert another nested accordion -->
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion6" href="#accordion6collapseInnerOne">
Producto #7.1
</a></h4>
</div>
<div id="accordion6collapseInnerOne" class="panel-body collapse">
<div class="panel-inner">
Detalle #7.1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="panel-toggle" data-toggle="collapse" data-parent="#accordion6" href="#accordion6collapseInnerTwo">
Producto #8.2
</a></h4>
</div>
<div id="accordion6collapseInnerTwo" class="panel-body collapse">
<div class="panel-inner">
Detalle #8.2
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment