What is this?

a collapsible div

Does it have any dependencies?

Nope

Is it complicated?

Well, not really, but you do have to follow a few rules. It works best if you use jekyll and a data file to loop thru and build the proper strucure.

Do I have to use it with Jekyll?

Nope, it just makes it easier to have the correct toggle/body index numbers.

You made it so it is perfect and works under all use cases right?

Well, no. It works great as a simple expandable FAQ, but I have not tried to use it for anything else. For example, if you stick a large image in one of the bodies it may not work properly.

How it works

Each panel is made up of a panel div which contains a panel-heading div for the title, and then a panel-body div for the body.

Inside the panel-heading is the question mark image, and the title inside an a tag. The panel-heading div, the img and the a all have a data-toggle set to an index number - for any given panel all three items have the same data-toggle number. The img and the a tags need the same data-toggle or they won’t expand the body if you don’t click directly on them.

When you click on a panels heading/title, the javascript code looks for a body that matches the same data-toggle number - the body has a data-body index number that is the same index number as the panel heading that it goes with.

Also when you click on a given heading, the code goes thru all other bodies and collapses them - so that as you expand one panel, any other open panel will collapse.

Example of the html to get the titles and bodies from a data file with Jekyll:

	{% for item in site.data.faqs %}
	<div class="panel">
		<div class="panel-heading" data-toggle="{{forloop.index}}"> 	
			<img alt="" class="panel-heading-question" data-toggle="{{forloop.index}}" src="questionmark.png">  
			<a href="javascript:void(0)" data-toggle="{{forloop.index}}" href="#">{{item.title}}</a>
		</div>
		<div class="panel-body hidden-element" data-body="{{forloop.index}}"> 
			{{item.body}} 
		</div>
	</div>
	{% endfor %}

You can see all the CSS and Javascript in the repo here: https://github.com/rdyar/collapsible-panels