How to add toggling of expand/collapse icons to a Bootstrap accordion?

Question

I'd like to extend the Bootstrap accordion example to include up/down-pointing chevrons which indicate whether the list item is expanded or not. I've noticed that collapsing the list item adds the collapsed class to the button , and in that case I would like to show a chrevon-down icon; otherwise, for an expanded button, I'd like to show the chevron-up icon.

I've tried implementing this in this snippet:

 $(document).ready(function(){ $("#accordion button").click(function(){ $("#accordion button .mdi").each(function(){ $(this).toggleClass('mdi-chevron-up', function(){ return $(this).parent().hasClass('collapsed'); }); $(this).toggleClass('mdi-chevron-down', function(){ return (!$(this).parent().hasClass('collapsed')); }); }); }); }); 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <div id="accordion"> <div class="card border-bottom-0"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-light w-100 text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <i class="mdi mdi-chevron-up float-right"></i> Pipeline Integrity Assessment and Design </button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> Our services include the design and assessment of subsea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine design and assessment. </div> </div> </div> <div class="card border-bottom-0"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-light w-100 text-left collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <i class="mdi mdi-chevron-up float-right"></i> Structural Reliability Assessment (SRA) </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body"> <p>Ralf Peek has over 30 years of experience in the area of structural reliability assessment and the estimation and assessment of uncertainties affecting structural performance in order to ensure that safety margins are adequate to cover such uncertainties. His specific experience includes: <ul> <li>Reliability-based design of buried arctic subsea pipeline against loading by ice keels gouging the sea floor</li> <li>SRA for pipelines subject to lateral buckling under thermal expansion</li> <li>Operating pipelines subject to extreme conditions (for example, turbidity current loading)</li> <li>Probabilistic response-based seismic loading assessment criteria</li> <li>Nuclear containment structural reliability assessment</li> </ul> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 

It seems that the icons don't display without downloading the fonts as described in https://materialdesignicons.com/bootstrap . However, what I observe in my 'actual' application is that the chrevrons all point in the same direction and move in tandem:

Can someone point out what is wrong with this implementation?

Update

Reading the documentation ( http://api.jquery.com/toggleclass/ ) more carefully, I noticed that the second form of .toggleClass() requires a Boolean as the second input argument, not a function which returns a Boolean. However, with this code:

 $(document).ready(function(){ $("#accordion button").click(function(){ $("#accordion button .mdi").each(function(){ $(this).toggleClass('mdi-chevron-up', $(this).parent().hasClass('collapsed')); $(this).toggleClass('mdi-chevron-down', (!$(this).parent().hasClass('collapsed'))); }); }); }); 

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <div id="accordion"> <div class="card border-bottom-0"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-light w-100 text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <i class="mdi mdi-chevron-up float-right"></i> Pipeline Integrity Assessment and Design </button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> Our services include the design and assessment of subsea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine design and assessment. </div> </div> </div> <div class="card border-bottom-0"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-light w-100 text-left collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <i class="mdi mdi-chevron-down float-right"></i> Structural Reliability Assessment (SRA) </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body"> <p>Ralf Peek has over 30 years of experience in the area of structural reliability assessment and the estimation and assessment of uncertainties affecting structural performance in order to ensure that safety margins are adequate to cover such uncertainties. His specific experience includes: <ul> <li>Reliability-based design of buried arctic subsea pipeline against loading by ice keels gouging the sea floor</li> <li>SRA for pipelines subject to lateral buckling under thermal expansion</li> <li>Operating pipelines subject to extreme conditions (for example, turbidity current loading)</li> <li>Probabilistic response-based seismic loading assessment criteria</li> <li>Nuclear containment structural reliability assessment</li> </ul> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 

where I've changed the second icon to be a chevron-down initially, I still observe some undesired behavior. Initially the display is as I would expect:

However, which I click the upper list item to collapse it, the lower one reverses its icon direction as well:

How to debug this?

Answer 1

I would change how you're using toggleClass . It can take one more class names to be toggled for each element in the matched set, if separated by spaces. Check out the docs: https://api.jquery.com/toggleclass/

Update

I changed your JavaScript a bit for the desired behavior. Now if you click an open panel's heading with the mdi-chevron-up icon, the icon should change to mdi-chevron-down . If you click a closed panel's heading with the mdi-chevron-down icon, it'll change to mdi-chevron-up , and any other open panels will close and also change to mdi-chevron-down .

Hopefully this is more along the lines of what you were looking for.

 function toggleChevron(e) { $(e.target) .prev('.card-header') .find("i.mdi") .toggleClass('mdi-chevron-down mdi-chevron-up'); } $('#accordion').on('hidden.bs.collapse', toggleChevron); $('#accordion').on('shown.bs.collapse', toggleChevron); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.4.85/css/materialdesignicons.css" rel="stylesheet" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <div id="accordion"> <div class="card border-bottom-0"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-light w-100 text-left" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <i class="mdi mdi-chevron-up float-right"></i> Pipeline Integrity Assessment and Design </button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> Our services include the design and assessment of subsea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine design and assessment. </div> </div> </div> <div class="card border-bottom-0"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-light w-100 text-left collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <i class="mdi mdi-chevron-down float-right"></i> Structural Reliability Assessment (SRA) </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body"> <p>Ralf Peek has over 30 years of experience in the area of structural reliability assessment and the estimation and assessment of uncertainties affecting structural performance in order to ensure that safety margins are adequate to cover such uncertainties. His specific experience includes: <ul> <li>Reliability-based design of buried arctic subsea pipeline against loading by ice keels gouging the sea floor</li> <li>SRA for pipelines subject to lateral buckling under thermal expansion</li> <li>Operating pipelines subject to extreme conditions (for example, turbidity current loading)</li> <li>Probabilistic response-based seismic loading assessment criteria</li> <li>Nuclear containment structural reliability assessment</li> </ul> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>