Osh Mansor Osh Mansor - 1 month ago 15
CSS Question

How to add plus minus symbol to nested bootstrap accordions

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');
});

});

Answer

If you implement the panel-group with the correct styles and unique ids, you can use CSS to add indicators on the toggle nested too. No new JQuery required:

DEMO: http://jsbin.com/zixeza/1/

CSS:

.panel-group .panel-heading a:after {
  content: '-';
  position: absolute;
  right: 20px;
  top:5px;
}
.panel-group .panel-heading a.collapsed:after {
  content: '+';
}

HTML:

<div class="container">

         <div class="panel-group" id="accordion">

            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                     Collapsible Group Item #1
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="collapseOne" class="panel-collapse collapse in">
                  <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. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->

            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                     Collapsible Group Item #2
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="collapseTwo" class="panel-collapse collapse">
                  <div class="panel-body">

                    <!-- nested -->


         <div class="panel-group" id="nested">

            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a data-toggle="collapse" data-parent="#nested" href="#nested-collapseOne">
                     Collapsible Group Item #1
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="nested-collapseOne" class="panel-collapse collapse in">
                  <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. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse --> 
            </div><!-- /.panel --> 

            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseTwo">
                     Collapsible Group Item #2
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="nested-collapseTwo" class="panel-collapse collapse">
                  <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. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->

            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseThree">
                     Collapsible Group Item #3
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="nested-collapseThree" class="panel-collapse collapse">
                  <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. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->
         </div><!-- /.panel-group -->


<!-- nested -->


                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->

            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                     Collapsible Group Item #3
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="collapseThree" class="panel-collapse collapse">
                  <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. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->
         </div><!-- /.panel-group -->

</div><!-- /.container -->