Twitter bootstrap-collapse: highlighting selected collapse item

1
votes

I want to highlight the selected collapse item. To achieve this, I added new classes (accordion-heading-highlighted and accordion-group-highlighted) with addClass() method for the accordion-heading and accordion-group but there is a problem.

If I clicked on a collapsible item while it is closed, it works fine. However, If I clicked on a collapsible item which is opened, it's accordion-heading background color couldn't change to the original one.

You can test it on here: http://jsfiddle.net/uuZAK/

How can I fix this?

2
jqueryjquery-selectorstwitter-bootstrapcollapse

2 Answers

1
votes

There are two scenarios here that you have to account for:

  1. If the user clicks the active item, deactivate it
  2. If the user clicks an inactive item, deactivate all items, then activate this one.

Your current solution has no way of detecting which item is already active. You can use the $.hasClass function to check if the item you've clicked is already active.

Here's a forked jsFiddle with the result: http://jsfiddle.net/Willyham/6v7Rn/

1
votes

You can bind on hide and show event of accordion-body to set status for the collapse item. No issue with double-click.

I reuse the code of Will Demaine. Here's the demo: http://jsfiddle.net/kXTc6/1/