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

For a CSS-only (and icon-free) solution using Bootstrap 3 I had to do a bit of fiddling based on Martin Wickman's answer above.

I didn't use the accordion-* notation because it's done with panels in BS3.

Also, I had to include in the initial HTML aria-expanded="true" on the item that's open at page load.

Here is the CSS I used.

.accordion-toggle:hover { text-decoration: none; }
.accordion-toggle:hover span, .accordion-toggle:hover strong { text-decoration: underline; }
.accordion-toggle:before { font-size: 25px; }
.accordion-toggle[data-toggle="collapse"]:before { content: "+"; margin-right: 0px; }
.accordion-toggle[aria-expanded="true"]:before { content: "-"; margin-right: 0px; }

Here is my sanitized HTML:

    
    

        

            
                Title 1
                    
            
        
        

            

                Text 1
            
        
    
    

        

            
                
            

                Text 2