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

Private Content

You must be logged in with your Envato Account for Free in order to view this Content.

Last Modified: May 20, 2021

Need Help?