Bootstrap offers a great Accordion element but it needs a few patches:
- An up and down arrow beside the accordion's title would be nice.
- The clickable area is centered around the title text. If you click between the text and the background border, the accordion will not show or hide.
- A hide all or show all method would be nice.
I created a JSFiddle: http://jsfiddle.net/p1ok0t51/4/
A few key points to point out,
the up/down arrow switch is enabled by the CSS.
I added the following to both the div.panel-heading and h4 element, so that the clickable area is the entire title div:
data-toggle="collapse" data-target='#collapse2'
The data-toggle="collapse" attribute makes your element clickable, by adding it to the div.title element, the entire div becomes clickable. Thus, when users click in between the title text and the border of the div.title element, the accordion will still respond.
The data-target="#collapse2" attribute will add and remove a class named collapsed when clicked. The CSS in the JSFiddle has different styles when collapsed appear and disappear.
I removed the data-parent="#accordion" attribute to allow show all and hide all. If this attribute is added like in the Bootstrap's example, then only one section can be expanded at anytime.
A great website for looking up Bootstrap icons (if you don't want to use the up/down arrow button), click here: http://glyphicons.bootstrapcheatsheets.com/
Reference:
http://stackoverflow.com/questions/18325779/bootstrap-3-collapse-show-state-with-chevron-icon
