Last Updated: September 29, 2021
·
29.87K
· 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..

coffee:

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

haml:

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

Picture

Related protips:

Change the Bootstrap NavBar Breakpoint

2 Responses
Add your response

This is nice ! I should definetly check HAML.

Another solution, with CSS :
http://jsfiddle.net/d5RmQ/1/

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 ·
  NODES
Community 1
Idea 1
idea 1
iOS 2
Javascript 10
os 5
web 1