How to write script for changing '+' , '-' symbol in nested accordion?
what happen is that you have 2 div with the class
panel-group one inside the other so when you click in the second panel-group you fire the event two times witch cause the problem. so we added one more class ".inner" with second panel-group. So Now it will not create an issue.<!DOCTYPE html>
<html lang="en">
<head>i
<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>
/* CSS==> */
<style>.panel-group .panel {
border-radius: 0;
box-shadow: none;
border-color: #EEEEEE;
}
.panel-default > .panel-heading {
padding: 0;
border-radius: 0;
color: #212121;
background-color: #FAFAFA;
border-color: #EEEEEE;
}
.panel-title {
font-size: 14px;
}
.panel-title > a {
display: block;
padding: 15px;
text-decoration: none;
}
.more-less {
float: right;
color: #212121;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #EEEEEE;
}
body {
background-color: #26a69a;
}
.demo {
padding-top: 60px;
padding-bottom: 60px;
}
.highlight{background: #ff0 !important; transition: 2s ease all;}
</style>
/* HTML==> */
</head><body>
<div class="container demo">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="more-less glyphicon glyphicon-plus"></i>
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="more-less glyphicon glyphicon-plus"></i>
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="more-less glyphicon glyphicon-plus"></i>
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<!-- nested panel-group start -->
<div class="panel-group inner" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
<i class="more-less glyphicon glyphicon-plus"></i>
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne1">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
<i class="more-less glyphicon glyphicon-plus"></i>
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo2">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree3" aria-expanded="false" aria-controls="collapseThree3">
<i class="more-less glyphicon glyphicon-plus"></i>
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree3">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
</div>
</div>
</div>
</div><!-- panel-group -->
<!-- nested panel-group ends -->
</div>
</div>
</div>
</div><!-- panel-group -->
</div><!-- container -->
/* JQuery==> */
<script>function toggleIcon(e) {
$(e.target)
.prev('.panel-heading')
.find(".more-less")
.toggleClass('glyphicon-plus glyphicon-minus');
$(e.target)
.prev('.panel-heading')
.toggleClass('highlight');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);
//$('panel-heading').addClass("highlight");
$('.inner').on('hidden.bs.collapse', toggleIcon);
$('..inner').on('shown.bs.collapse', toggleIcon);
</script>
</body>
</html>
Comments
Post a Comment