Last Updated: September 29, 2021
· flynfish

Add caret to bootstrap accordion

The icons I am using are part of font-awesome collection. If you are using bootstrap then change them to icon-chevron-down and icon-chevron-right.

The screenshot shows it using chevron on the bootstrap site, so the code below isn't a 100% match to what you see, but you get the idea..


$(".accordion").on "show hide", (e) ->
  $(".accordion-heading").find(".accordion-toggle i").toggleClass "icon-caret-down icon-caret-right"


%a.accordion-toggle{ "data-toggle" => "collapse", :href => "#blah"}
     Accordion Title


Related protips:

Change the Bootstrap NavBar Breakpoint

2 Responses
Add your response

This is nice ! I should definetly check HAML.

Another solution, with CSS :

Still, needs some javascript to toggle the .collapsed class on the .accordion-toggle

over 1 year ago ·

Thanks a lot for this! It helped me!

over 1 year ago ·