COLLAPSE

Toggle the visibility of contents accross your project with a few classes!

How it works

There are two main parts of the jtbCollapse. One of them is the trigger of the action. And the other one is collapsible area.

Trigger can be anything including buttons, texts etc. only requirement of it is adding jtbCollapse attribute with the related collapsible item id.

Likewise, the collapsible area can be any element too. Just add the proper id you have added in the trigger, and add .jtbCollapseArea class to it.

Hello! I am a collapsible area! Click again to hide me!
			Copy
			<button class='jtbButton jtbButton_sm' jtbCollapse='collapse-1'>Click Me!</button>
<div id='collapse-1' class='jtbCollapseArea'>Hello! I am a collapsible area! Click again to hide me!</div>
		

Accordion

It is possible to create multiple jtbCollapseAreas linked to each other too. Just wrap them with .jtbCollapseGroup.

Click Me!
Hello! I am a collapsible area! Click again to hide me!
Click Me!
Hello! I am a collapsible area! Click again to hide me!
Click Me!
Hello! I am a collapsible area! Click again to hide me!
Click Me!
Hello! I am a collapsible area! Click again to hide me!
Click Me!
Hello! I am a collapsible area! Click again to hide me!
			Copy
			<div class='jtbCollapseGroup'>

	<div jtbCollapse='collapse-2'>Click Me!</div>
	<div id='collapse-2' class='jtbCollapseArea'>Hello! I am a collapsible area! Click again to hide me!</div>
	
	<div jtbCollapse='collapse-3'>Click Me!</div>
	<div id='collapse-3' class='jtbCollapseArea'>Hello! I am a collapsible area! Click again to hide me!</div>
	
	<div jtbCollapse='collapse-4'>Click Me!</div>
	<div id='collapse-4' class='jtbCollapseArea'>Hello! I am a collapsible area! Click again to hide me!</div>
	
	<div jtbCollapse='collapse-5'>Click Me!</div>
	<div id='collapse-5' class='jtbCollapseArea'>Hello! I am a collapsible area! Click again to hide me!</div>
	
	<div jtbCollapse='collapse-6'>Click Me!</div>
	<div id='collapse-6' class='jtbCollapseArea'>Hello! I am a collapsible area! Click again to hide me!</div>

</div>
		

Javascript behaviour

Initializing

Javascript behaivours of jtbCollapse has been written in collapse.js plugin of jtb_md.js. To avoid any problematic behaviour on collapse areas; do not remove this plugin manually.

Methods

You can use the jtbCollapse methods to make the collapse elements perform an action.

Show

If you want to make a spesific collapse visible, you can easily call the jtbCollapse function with parameter show.

				Copy
				$('#collapseAreaID').jtbCollapse('show')
			

Hide

If you want to make a spesific collapse invisible, you can easily call the jtbCollapse function with parameter hide.

				Copy
				$('#collapseAreaID').jtbCollapse('hide')
			

Toggle visibility

If you want to change a spesific collapse's visibility, you can easily call the jtbCollapse function with parameter toggle.

				Copy
				$('#collapseAreaID').jtbCollapse('toggle')