Accordions

You can add an Accordion using the Code below:

Code Example

<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:

<div class="accordion accordion-border clearfix" data-active="2">

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

	<div class="acctitle"><i class="acc-closed icon-ok-circle"></i><i class="acc-open icon-remove-circle"></i>This is Accordion Title</div>
	<div class="acc_content clearfix">This is Accordion Content</div>

</div>

Settings

Setting Description

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

`data-state`

The State of the Accordions. Eg. closed to keep all the Accordions closed by default.

Option(s): open or closed

Ex: data-state="open"

`data-active`

The Order Number of the Accordion which you want to activate on initialization.

Ex: Use data-active="2" to activate the Second Accordion on Initialization.