javascript - How to add toggling of expandcollapse icons to a Bootstrap accordion? - Stack Overflow

admin管理员组

文章数量:1415491

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=".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=".3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src=".js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src=".1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

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./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./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./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./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./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./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./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./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare./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./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?

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Jul 1, 2018 at 18:05 Kurt Peek asked Jul 1, 2018 at 17:50 Kurt PeekKurt Peek 58k104104 gold badges346346 silver badges565565 bronze badges 5

• 1 Why do you toggle it by jquery? You can achieve that simply via css .chevron {content: '↑';//icon styles} and .collapsed .chevron {content: '↓';}. – bigless Commented Jul 1, 2018 at 18:16
• 1 bigless, the way the icons are determined with Material Design icons for Bootstrap is by their class; I don't believe it is possible to add/remove classes with CSS? – Kurt Peek Commented Jul 1, 2018 at 18:47
• 1 Yea, sorry I never used these icons. Anyway if you are using preprocessor, after mdi import, you can write something like .chevron {.mdi-chevron-up;} .collapsed .chevron {.mdi-chevron-down;} – bigless Commented Jul 1, 2018 at 19:35
• I believe that inheritance is a feature of SCSS, not of CSS itself (cf. stackoverflow./questions/1065435/…). Currently, I'm using the piled CSS through a CDN, so I can't just @extend the Material Design classes, but I could change this to import their source code in my own SCSS; that's a good idea. – Kurt Peek Commented Jul 1, 2018 at 20:10
• I looked at their scss and these classes are made through sass iterator and I am not sure that these generated classes are usable at "pile time".. You can try.. – bigless Commented Jul 1, 2018 at 20:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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./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./ajax/libs/MaterialDesign-Webfont/2.4.85/css/materialdesignicons.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./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./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./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./bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

本文标签： javascriptHow to add toggling of expandcollapse icons to a Bootstrap accordionStack Overflow