Adding open closed icon to Twitter Bootstrap collapsibles accordions

Question

I ve set up this simple version of the Bootstrap accordion   Simple accordion  http   jsfiddle net darrenc cngPS   Currently the icon only points down  but does anyone know what JS would be needed to be implemented so as to change the class of the icon to    lt i class  icon-chevron-up  gt  lt  i gt       so that it points up when expanded and toggles back to down again when collapsed  and so fourth

User · Answer

Here is my solution which is further refined from one posted by @john-magnolia and solves some of its issues

/**
 * Toggle on/off arrow for Twitter Bootstrap collapsibles.
 *
 * Multi-collapsible-friendly; supports several collapsibles in the same group, on the same page.
 */
function animateCollapsibles() {

    $('.collapse').on('show', function() {
        var $t = $(this);
        var header = $("a[href='#" + $t.attr("id") + "']");
        header.find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");
    }).on('hide', function(){
        var $t = $(this);
        var header = $("a[href='#" + $t.attr("id") + "']");
        header.find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");
    });
}

And here is the example markup:

<div class="accordion" id="accordion-send">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
                <i class="icon icon-chevron-right"></i> Send notice
            </a>
        </div>
        <div id="collapse-refund" class="accordion-body collapse">
            <div class="accordion-inner">
                <p>Lorem ipsum Toholampi city</p>
            </div>
        </div>
    </div>
</div>

User · Answer

Shortest possible answer   HTML   lt a data-toggle  collapse  data-parent   panel-quote-group  href   collapseQuote  gt       lt span class  toggle-icon glyphicon glyphicon-collapse-up  gt  lt  span gt   lt  a gt    JS    lt script type  text javascript  gt     function              a data-toggle  collapse     click function             this  find  span toggle-icon   toggleClass  glyphicon-collapse-up glyphicon-collapse-down                  lt  script gt    And of course  you can use anything for a selector instead of anchor tag a and you can also use specific selector instead of this if your icon lies outside your clicked element

User · Answer

The most readable CSS-only solution would probably be to use the aria-expanded attribute  Remember that you ll need to add aria-expanded  false  to all collapse-elements as this is not set on load  only on first click    The HTML    lt h2 data-toggle  collapse  href   collapseId  aria-expanded  false  gt       lt span class  glyphicon glyphicon-chevron-right  gt  lt  span gt       lt span class  glyphicon glyphicon-chevron-down  gt  lt  span gt  Title  lt  h2 gt    The CSS   h2 aria-expanded  false   span glyphicon-chevron-down  h2 aria-expanded  true   span glyphicon-chevron-right       display  none     h2 aria-expanded  true   span glyphicon-chevron-down  h2 aria-expanded  false   span glyphicon-chevron-right       display  inline      Works with Bootstrap 3 x

User · Answer

I think the best codes are these         accordion1   collapse       toggle  false      on  show  function  e              e target  parent   find   icon-chevron-down   removeClass  icon-chevron-down   addClass  icon-chevron-up             on  hide   function  e              e target  parent   find   icon-chevron-up   removeClass  icon-chevron-up   addClass  icon-chevron-down

User · Answer

If anyone is interested this is how you do it with BS3 since they changed the event names       collapse   on  show bs collapse   function      var i     this  parent   find  i     i toggleClass  fa-caret-right fa-caret-down       on  hide bs collapse   function      var i     this  parent   find  i     i toggleClass  fa-caret-down fa-caret-right          You simply change the class names in the example to the ones you use in your case

User · Answer

For a CSS-only  and icon-free  solution using Bootstrap 3 I had to do a bit of fiddling based on Martin Wickman s answer above    I didn t use the accordion-  notation because it s done with panels in BS3    Also  I had to include in the initial HTML aria-expanded  true  on the item that s open at page load    Here is the CSS I used    accordion-toggle hover   text-decoration  none     accordion-toggle hover span   accordion-toggle hover strong   text-decoration  underline     accordion-toggle before   font-size  25px     accordion-toggle data-toggle  collapse   before   content       margin-right  0px     accordion-toggle aria-expanded  true   before   content   -   margin-right  0px      Here is my sanitized HTML    lt div id  acc1  gt           lt div class  panel panel-default  gt           lt div class  panel-heading  gt               lt span class  panel-title  gt                   lt a class  accordion-toggle  data-toggle  collapse  aria-expanded  true  data-parent   acc1  href   acc1-1  gt Title 1                      lt  a gt               lt  span gt           lt  div gt           lt div id    acc1-1    class  panel-collapse collapse in  gt               lt div class  panel-body  gt                  Text 1              lt  div gt           lt  div gt       lt  div gt       lt div class  panel panel-default  gt           lt div class  panel-heading  gt               lt span class  panel-title  gt                   lt a class  accordion-toggle  data-toggle  collapse  data-parent   acc1    href     acc1-2    gt Title 2                      lt  a gt               lt  span gt           lt  div gt           lt div id    acc1-2    class  panel-collapse collapse  gt               lt div class  panel-body  gt                  Text 2                                lt  div gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

None of the above worked for me but I came up with this and it worked   function toggleChevron el      if    el  find  i   hasClass  icon-chevron-left            el  find   icon-chevron-left   removeClass  icon-chevron-left   addClass  icon-chevron-down      else          el  find   icon-chevron-down   removeClass  icon-chevron-down   addClass  icon-chevron-left        HTML implementation    lt div class  accordion  id  accordion-send  gt     lt div class  accordion-group  gt       lt div class  accordion-heading  onClick  toggleChevron this   gt         lt a class  accordion-toggle  data-toggle  collapse  data-parent   accordion-send  href   collapse-refund  gt           lt i class  icon icon-chevron-right  gt  lt  i gt  Send notice        lt  a gt

User · Answer

This has been answered by numerous ways but what I came up with was the simplest and easiest for me with Bootstrap 3 and font awesome  I just did     a toggler   on  click   function        i   this  toggleClass  fa-caret-up         This just toggles the CSS class of the icon I want to show  I add the class toggler to the item I want to apply this to  This can be added onto any item you want to toggle an icon

User · Answer

RobSadler   RE Martin Wickman s CSS only version     You can get around that problem by putting accordion-caret on the anchor tag and giving it a collapsed class by default   Like so    lt div class  accordion-group  gt   lt div class  accordion-heading  gt       lt a class  accordion-toggle accordion-caret collapsed  data-toggle  collapse  href   collapseOne  gt           lt strong gt Header lt  strong gt       lt  a gt   lt  div gt   lt div id  collapseOne  class  accordion-body collapse in  gt       lt div class  accordion-inner  gt          Content      lt  div gt   lt  div gt      That worked for me

User · Answer

For Bootstrup 3 2   FontAwesome    document  ready function                accordProfile   on  shown bs collapse   function                 fa-chevron-down   removeClass  fa-chevron-down   addClass  fa-chevron-up                     accordProfile   on  hidden bs collapse   function                 fa-chevron-up   removeClass  fa-chevron-up   addClass  fa-chevron-down                  Sometimes you have to write so  If so                      collapsed span   removeClass  fa-minus   addClass  fa-plus      Automatically generated  class  collapsed    when you press the hide menu   ps when you need to create a tree menu

User · Answer

The Bootstrap Collapse has some Events that you can react to     document  ready function                accordProfile   on  shown   function                 icon-chevron-down   removeClass  icon-chevron-down   addClass  icon-chevron-up                     accordProfile   on  hidden   function                 icon-chevron-up   removeClass  icon-chevron-up   addClass  icon-chevron-down

User · Answer

Here is my approach for Bootstrap 2 x  It is just some css  No JavaScript needed        accordion-caret  accordion-toggle hover           text-decoration  none             accordion-caret  accordion-toggle hover span       accordion-caret  accordion-toggle hover strong           text-decoration  underline             accordion-caret  accordion-toggle before           font-size  25px          vertical-align  -3px             accordion-caret  accordion-toggle not  collapsed  before           content               margin-right  0px             accordion-caret  accordion-toggle collapsed before           content               margin-right  0px          Just add class accordion-caret to the accordion-group div  like this    lt div class  accordion-group accordion-caret  gt       lt div class  accordion-heading  gt           lt a class  accordion-toggle  data-toggle  collapse  href   collapseOne  gt               lt strong gt Header lt  strong gt           lt  a gt       lt  div gt       lt div id  collapseOne  class  accordion-body collapse in  gt           lt div class  accordion-inner  gt              Content          lt  div gt       lt  div gt   lt  div gt

User · Answer

Here is a solution that creates a section that is expandable using somewhat material design  bootstrap 4 5 5 alpha and entirely non-javascript  Style for head section  lt style gt   data-toggle  quot collapse quot    fa before       content   quot  f077 quot       data-toggle  quot collapse quot   collapsed  fa before       content   quot  f078 quot      lt  style gt   Body html  lt div class  quot pt-3 pb-3 quot  style  quot border-top  1px solid  eeeeee  border-bottom  1px solid  eeeeee  cursor  pointer  quot  gt   lt a href  quot  expandId quot  class  quot text-dark float-right collapsed quot  data-toggle  quot collapse quot  role  quot button quot  aria-expanded  quot false quot  aria-controls  quot expandId quot  gt       lt i class  quot fa quot  aria-hidden  quot false quot  gt  lt  i gt   lt  a gt   lt a href  quot  expandId quot  class  quot text-dark collapsed quot  data-toggle  quot collapse quot  role  quot button quot  aria-expanded  quot false quot  aria-controls  quot expandId quot  gt Expand Header lt  a gt   lt div class  quot collapse quot  id  quot expandId quot  gt      CONTENT GOES IN HERE  lt  div gt

User · Answer

Use CSSes pseudo-selector  after using Bootstrap 3 s integrated Glyphicons for a no JS answer with minor modification to your HTML     CSS   panel-heading  data-toggle  collapse   after       font-family   Glyphicons Halflings       content    e072       play  icon        float  right      color   b0c5d8      font-size  18px      line-height  22px          rotate  play  icon from  gt   right arrow  to down arrow        -webkit-transform  rotate -90deg       -moz-transform     rotate -90deg       -ms-transform      rotate -90deg       -o-transform       rotate -90deg       transform          rotate -90deg      panel-heading  data-toggle  collapse   collapsed after          rotate  play  icon from  gt   right arrow  to    up arrow         -webkit-transform  rotate 90deg       -moz-transform     rotate 90deg       -ms-transform      rotate 90deg       -o-transform       rotate 90deg       transform          rotate 90deg       HTML  Add class  collapsed  to any anchor tags that are closed by default   This will turn anchors such as   lt a data-toggle  collapse  data-parent   accordion  href   collapseTwo  gt    into   lt a class  collapsed  data-toggle  collapse  data-parent   accordion  href   collapseTwo  gt    CodePen Live Example  http   codepen io anon pen VYobER  Screenshot

User · Answer

Another no-javascript solution that uses the collapse functionality itself      Prevent block display and transition animation     expand-icon collapse in   collapse-icon collapse in     display  inline     expand-icon collapsing     display  none        HTML Toggler with glyphicons     lt a data-toggle  collapse  href   my-collapse  gt    lt span class  my-collapse collapse-icon collapse in  gt     lt span class  glyphicon glyphicon-collapse-up  gt  lt  span gt    lt  span gt    lt span class  my-collapse expand-icon collapse  gt     lt span class  glyphicon glyphicon-expand  gt  lt  span gt       lt  span gt   lt  a gt

User · Answer

This is how I do it without any js    I used the icon glyphicon-triangle-right but it works with any other icon  what it does is that it applies a 90 degrees rotation to the icon when the panel is open or not  I m using Bootstrap 3 3 5 for this one   CSS Code  h4 panel-title a       display  block     h4 panel-title a collapsed  glyphicon-triangle-right           color   ada9a9  important          transform  rotate 0deg     h4 panel-title a  glyphicon-triangle-right           color   515e64  important          transform  rotate 90deg       This is the HTML structure taken from the Bootstrap example   lt div class  panel-group  id  accordion  role  tablist  aria-multiselectable  true  gt                               lt div class  panel panel-default  gt                                   lt div class  panel-heading  role  tab  id  headingOne  gt                                       lt h4 class  panel-title  gt                                           lt a role  button  data-toggle  collapse  data-parent   accordion  href   collapseOne  aria-expanded  true  aria-controls  collapseOne  gt                                              Proven Expertise                                              lt span class  glyphicon glyphicon-triangle-right pull-right  aria-hidden  true  gt  lt  span gt                                           lt  a gt                                       lt  h4 gt                                   lt  div gt                                   lt div id  collapseOne  class  panel-collapse collapse in  role  tabpanel  aria-labelledby  headingOne  gt                                       lt div class  panel-body  gt                                          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                                       lt  div gt                                   lt  div gt                               lt  div gt                            lt  div gt

User · Answer

A bootstrap v3 solution  where the events have different names   also using only one jQuery selector  as seen here        accordion   on  hide bs collapse show bs collapse   function  n          n target  siblings   panel-heading   find  i glyphicon   toggleClass  glyphicon-chevron-down glyphicon-chevron-up

User · Answer

Added to  muffls answer so that this works with all twitter bootstrap collapse and makes the change to the arrow before the animatation starts       collapse   on  show   function          this  parent   find   icon-chevron-left   removeClass  icon-chevron-left   addClass  icon-chevron-down       on  hide   function          this  parent   find   icon-chevron-down   removeClass  icon-chevron-down   addClass  icon-chevron-left          Depending on your HTML structure you may need to modify the parent

User · Answer

Here it s the answer for those who are looking for a solution in Bootstrap 3 like myself    The HTML part    lt div class  btn-group  gt     lt button type  button  class  btn btn-danger  gt Action lt  button gt     lt button type  button  class  btn btn-danger  data-toggle  collapse  data-target   demo  gt       lt span class  glyphicon glyphicon-minus  gt  lt  span gt     lt  button gt   lt  div gt   lt div id  demo  class  collapse in  gt Some dummy text in here  lt  div gt    The js part       collapse   on  shown bs collapse   function      this  parent   find   glyphicon-plus   removeClass  glyphicon-plus   addClass  glyphicon-minus       on  hidden bs collapse   function      this  parent   find   glyphicon-minus   removeClass  glyphicon-minus   addClass  glyphicon-plus            Example accordion   Bootply accordion example

[javascript] Adding open/closed icon to Twitter Bootstrap collapsibles (accordions)

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap