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 po

Answer 1

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:

    

        
            Header
        
    
    

        

            Content