j4wxbg
Last Updated: February 25, 2016
·
19.23K
· flynfish
643de40e3b6fcb4a8f4f83e21fd458d3

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

2 Responses
Add your response

3428
Ea6e1e109cc6f9b262e2ad3d1994d983

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 ·
5313

Thanks a lot for this! It helped me!

over 1 year ago ·