Question

187

Add up/down arrows to Bootstrap Accordion

rated 0 times [ 189] [ 2] / answers: 1 / hits: 72704 / 7 Years ago, mon, october 16, 2017, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

santiago

Add To Favorites

Follow

Total Points: 375

Total Questions: 106

Total Answers: 97

Location: Argentina

Member since Thu, Mar 18, 2021

3 Years ago

answered 7 Years ago alorac · Accepted Answer

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.