Nested Accordion with another Jquery script.- glyphicon:first
HTML==>
<!DOCTYPE html><html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</head>
<body>
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-minus"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">Kiewit</a></h3>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel-group inner" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><span class="glyphicon glyphicon-plus"></span> <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne1">East</a></h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse">
<div class="panel-body">Content here...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><span class="glyphicon glyphicon-minus"></span> <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2">West</a></h4>
</div>
<div id="collapseOne2" class="panel-collapse collapse in">
<div class="panel-body">Content here...</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">Vulcan Materials</a></h3>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">Content here...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#collapseThree">Copper Springs</a></h3>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">Content here...</div>
</div>
</div>
</div>
JS==> TESTED
<script>// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(e){ if(this != e.target){ return 0;} $(this).parent().find(".glyphicon:first").removeClass("glyphicon-plus").addClass("glyphicon-minus"); }).on('hide.bs.collapse', function(e){ if(this != e.target){ return 0;} $(this).parent().find(".glyphicon:first").removeClass("glyphicon-minus").addClass("glyphicon-plus"); });
</body>
</html>
Comments
Post a Comment