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
Related protips:
Written by flynfish
Related protips
2 Responses
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
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Bootstrap
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#