111
rated 0 times
[
116]
[
5]
/ answers: 1 / hits: 28974
/ 10 Years ago, sat, october 25, 2014, 12:00:00
This question is a continuity from comments in question
How to add plus minus symbol to a bootstrap accordion
How to add plus and minus symbols to nested bootstrap accordions and make them work correctly? Currently, they are not toggling as expected.
This is what I have tried: http://jsfiddle.net/4t1qs0uv/2/
HTML:
<div class=panel-group id=accordion1>
<div class=panel panel-default>
<div class=panel-heading>
<h4 class=panel-title>
<a data-toggle=collapse data-parent=#accordion href=#livingroom-10 class=collapsed>Living Room</a>
</h4>
</div>
<div id=livingroom-10 class=panel-collapse collapse style=height: 0px;>
<div class=panel-body>
<div class=panel-group id=accordion2>
<div class=panel panel-default>
<div class=panel-heading>
<h4 class=panel-title>
<a data-toggle=collapse data-parent=#accordion href=#add101>
Air Condition
</a>
</h4>
</div>
<div id=add101 class=panel-collapse collapse>
<div class=panel-body>
<form class=form-inline role=form>
<div class=form-group>
<label for=usageperday>Usage Per Day</label><br>
<input type=text class=form-control name=usageperday-1.0.1 placeholder=Usage Per Day value=8>
</div>
<div class=form-group>
<label for=numbermonth>Number of days used per month</label><br>
<input type=text class=form-control name=numbermonth-1.0.1 placeholder=Number of days used per month value=30>
</div>
<div class=form-group>
<label for=watts>Watts</label><br>
<input type=text class=form-control name=watts-1.0.1 placeholder=Watts value=1500>
</div>
</form>
</div>
</div>
</div>
</div>
<div class=panel-group id=accordion2>
<div class=panel panel-default>
<div class=panel-heading>
<h4 class=panel-title>
<a data-toggle=collapse data-parent=#accordion href=#add102>
Fan
</a>
</h4>
</div>
<div id=add102 class=panel-collapse collapse in>
<div class=panel-body>
<form class=form-inline role=form>
<div class=form-group>
<label for=usageperday>Usage Per Day</label><br>
<input type=text class=form-control name=usageperday-1.0.2 placeholder=Usage Per Day value=8>
</div>
<div class=form-group>
<label for=numbermonth>Number of days used per month</label><br>
<input type=text class=form-control name=numbermonth-1.0.2 placeholder=Number of days used per month value=30>
</div>
<div class=form-group>
<label for=watts>Watts</label><br>
<input type=text class=form-control name=watts-1.0.2 placeholder=Watts value=90>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=panel panel-default>
<div class=panel-heading>
<h4 class=panel-title>
<a data-toggle=collapse data-parent=#accordion href=#bathroom-20 class=collapsed>
Bathroom
</a>
</h4>
</div>
<div id=bathroom-20 class=panel-collapse collapse style=height: 0px;>
<div class=panel-body>
<div class=panel-group id=accordion2>
<div class=panel panel-default>
<div class=panel-heading>
<h4 class=panel-title>
<a data-toggle=collapse data-parent=#accordion href=#add2029>
Router
</a>
</h4>
</div>
<div id=add2029 class=panel-collapse collapse>
<div class=panel-body>
<form class=form-inline role=form>
<div class=form-group>
<label for=usageperday>Usage Per Day</label><br>
<input type=text class=form-control name=usageperday-2.0.29 placeholder=Usage Per Day value=24>
</div>
<div class=form-group>
<label for=numbermonth>Number of days used per month</label><br>
<input type=text class=form-control name=numbermonth-2.0.29 placeholder=Number of days used per month value=30>
</div>
<div class=form-group>
<label for=watts>Watts</label><br>
<input type=text class=form-control name=watts-2.0.29 placeholder=Watts value=10>
</div>
</form>
</div>
</div>
</div>
</div>
<div class=panel-group id=accordion2>
<div class=panel panel-default>
<div class=panel-heading>
<h4 class=panel-title>
<a data-toggle=collapse data-parent=#accordion href=#add2030>
Scanner
</a>
</h4>
</div>
<div id=add2030 class=panel-collapse collapse>
<div class=panel-body>
<form class=form-inline role=form>
<div class=form-group>
<label for=usageperday>Usage Per Day</label><br>
<input type=text class=form-control name=usageperday-2.0.30 placeholder=Usage Per Day value=0.1>
</div>
<div class=form-group>
<label for=numbermonth>Number of days used per month</label><br>
<input type=text class=form-control name=numbermonth-2.0.30 placeholder=Number of days used per month value=2>
</div>
<div class=form-group>
<label for=watts>Watts</label><br>
<input type=text class=form-control name=watts-2.0.30 placeholder=Watts value=20>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
jQuery(function ($) {
var $active = $('#accordion1 .panel-collapse.in').prev().addClass('active');
$active.find('a').append('<span class=glyphicon glyphicon-minus pull-right></span>');
$('#accordion1 .panel-heading').not($active).find('a').prepend('<span class=glyphicon glyphicon-plus pull-right></span>');
$('#accordion1').on('show.bs.collapse', function (e) {
$('#accordion1 .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
$(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$('#accordion1').on('hide.bs.collapse', function (e) {
$(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
var $active2 = $('#accordion2 .panel-collapse.in').prev().addClass('active');
$active2.find('a').append('<span class=glyphicon glyphicon-minus pull-right></span>');
$('#accordion2 .panel-heading').not($active2).find('a').prepend('<span class=glyphicon glyphicon-plus pull-right></span>');
$('#accordion2').on('show.bs.collapse', function (e) {
$('#accordion2 .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
$(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$('#accordion2').on('hide.bs.collapse', function (e) {
$(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
});
More From » jquery
