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

Last Modified: May 20, 2021