Accordions

You can add an Accordion using the Code below:

Usage

<div class="accordion" data-collapsible="true">

	<div class="accordion-header">
		<div class="accordion-icon">
			<i class="accordion-closed icon-ok-circle"></i>
			<i class="accordion-open icon-remove-circle"></i>
		</div>
		<div class="accordion-title">
			Our Mission
		</div>
	</div>
	<div class="accordion-content">Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>

	<div class="accordion-header">
		<div class="accordion-icon">
			<i class="accordion-closed icon-ok-circle"></i>
			<i class="accordion-open icon-remove-circle"></i>
		</div>
		<div class="accordion-title">
			What we do?
		</div>
	</div>
	<div class="accordion-content">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum.</div>

	<div class="accordion-header" id="id-accordion-3">
		<div class="accordion-icon">
			<i class="accordion-closed icon-ok-circle"></i>
			<i class="accordion-open icon-remove-circle"></i>
		</div>
		<div class="accordion-title">
			Our Company's Value
		</div>
	</div>
	<div class="accordion-content">Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur.</div>

</div>

How to Use

Styles:

You can use 2 other styles for the Accordions. Eg. .accordion-bg or .accordion-border

Example:



	This is Accordion Title
	This is Accordion Content

	This is Accordion Title
	This is Accordion Content

	This is Accordion Title
	This is Accordion Content

Settings

Setting	Description
`data-state`	The State of the Accordions. Eg. closed to keep all the Accordions closed by default. Example: `open`
`data-active`	The Order Number of the Accordion which you want to activate on initialization. Example: Use `data-active="2"` to activate the Second Accordion on Initialization.

Related docs

Tabs Toggles