Twitter Bootstrap 3 accordion with show / hide button

Tag: twitter-bootstrap-3 , accordion Author: pwzh518 Date: 2014-01-19

I am working with twitter bootstrap 3 and the accordion module and I want to do as follows: a button that says 'show', and when it's shown, a button saying 'collapse'.

I have tried with data attributes but it didn't work.

The accordions are inside a loop with django.


I am using this js

$('a.accordion-toggle').click(function() {
    if ( $(this).next('.accordion-body').hasClass('in') ) {
    } else {

I have managed to make it work but it only switches the button once: all collapsed, button 'Open'. On shown, button 'Close'. But if I hide the accordion, the button doesn't change to 'Open' again.

Other Answer1

You can do it using just CSS. I used the 'folder open' and 'folder closed' glyphicons. This is the Bootstrap example, I've just added the collapse class to the closed header anchors.

Here's an example: