Add up/down arrows to Bootstrap Accordion

Question

I have a Bootstrap Accordion and I'd like to add state arrows to it.

So the arrows will face down when collapsed and up when expanded.

My current code is here (including demo): https://jsfiddle.net/m1xj0avo/

$(function () {

    var active = true;

    $('#collapse-init').click(function () {
        if (active) {
            active = false;
            $('.panel-collapse').collapse('show');
            $('.panel-title').attr('data-toggle', '');
            $(this).text('Enable accordion behavior');
        } else {
            active = true;
            $('.panel-collapse').collapse('hide');
            $('.panel-title').attr('data-toggle', 'collapse');
            $(this).text('Disable accordion behavior');
        }
    });
    
    $('#accordion').on('show.bs.collapse', function () {
        if (active) $('#accordion .in').collapse('hide');
    });

});

.panel-title:hover {
     cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button id="collapse-init" class="btn btn-primary">
    Disable accordion behavior
</button>
<br/><br/>

<div class="panel-group" id="accordion">
    <!-- First Panel -->
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title"
                 data-toggle="collapse" 
                 data-target="#collapseOne">
                 Collapsible Group Item #1
             </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, 
                enim eiusmod high life accusamus terry richardson ad squid.
            </div>
        </div>
    </div>
    
    <!-- Second Panel -->
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title" 
                 data-toggle="collapse" 
                 data-target="#collapseTwo">
                 Collapsible Group Item #2
             </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, 
                enim eiusmod high life accusamus terry richardson ad squid.
            </div>
        </div>
    </div>
    
    <!-- Third Panel -->
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title"
                 data-toggle="collapse"
                 data-target="#collapseThree">
                 Collapsible Group Item #3
             </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, 
                enim eiusmod high life accusamus terry richardson ad squid.
            </div>
        </div>
    </div>
</div>
    
    
    
    
    
    
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>For this SO Question: <a href='http://stackoverflow.com/q/20347553/1366033'>Keep Accordions Open</a>

    <br/>Find documentation: <a href='http://getbootstrap.com/javascript/#collapse-usage'>Bootstrap Collapse Usage</a>

    <br/>Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a>

    <br/>
    <div>

you can try bind a class on panel element on bootstrap events with javascript: https://v4-alpha.getbootstrap.com/components/collapse/#events and then css transform (rotate 180%) the arrow when class is on panel :-). good luck. — Joel Harkes, Oct 16 '17 at 19:36

Robert · Accepted Answer · 2020-12-27T16:52:57.450

There are CSS-only solutions that make use of some of the triggers that Bootstrap's accordion already has in place. For example, an expanded .panel-title has a value of [area-expanded="true"] which we can use as a CSS Selector.

With that in mind you can use code like this:

.panel-title {
  position: relative;
}
  
.panel-title::after {
  content: "\f107";
  color: #333;
  top: -2px;
  right: 0px;
  position: absolute;
  font-family: "FontAwesome"
}

.panel-title[aria-expanded="true"]::after {
  content: "\f106";
}

/*
 * Added 12-27-20 to showcase full title clickthrough
 */

.panel-heading-full.panel-heading {
  padding: 0;
}

.panel-heading-full .panel-title {
  padding: 10px 15px;
}

.panel-heading-full .panel-title::after {
  top: 10px;
  right: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

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

  <!-- First Panel -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseOne">Collapsible Group Item #1</h4>
    </div>
    
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
    
  <!-- Second Panel -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseTwo">Collapsible Group Item #2</h4>
    </div>
    
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
    
  <!-- Third Panel -->
  <div class="panel panel-default">
    <div class="panel-heading panel-heading-full">
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseThree">Collapsible Group Item #3 (panel-heading-ful)</h4>
    </div>

    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  
</div>

The carets are applied using Font Awesome and the :after pseudo selector.

Edit December 27th 2020:

Created additional CSS to show how to allow the collapse event to be triggered clicking anywhere on .panel-heading by removing the padding Bootstrap applies to this wrapper and applying it instead to .panel-title.

See .panel-heading-full which is applied to the last collapsible item.

You save my day by giving css solution which is applicable on ngb-accordion — Mukyuu, Dec 07 '18 at 02:42
I needed accordion in my project with Bootstrap, I came to this, this is JS free solution, but the click only takes in middle, if clicked below or above middle, click does not take — Susobhan Das, Dec 25 '20 at 01:24
@SusobhanDas that's because the `.panel-heading` class has padding assigned to it via Bootstrap: `padding: 10px 15px;`. Removing the padding from the heading wrapper and applying it to `.panel-title` instead will cause the entire heading to behave as you would expect. — Robert, Dec 27 '20 at 16:44

Add up/down arrows to Bootstrap Accordion

1 Answers1

Linked