Accordion Styles and Code Snippets

Accordion Plain

+ Expand All

Heading A

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum aliquet augue, non pretium justo egestas ac. Integer vitae augue convallis, sollicitudin mauris in, adipiscing nisi. Donec varius laoreet dignissim. Nulla vel varius lacus. Nullam tincidunt at nunc mattis pulvinar. Vestibulum et turpis non diam hendrerit pharetra vel at tellus. Nulla convallis fermentum lorem id laoreet. Proin elementum sed massa quis scelerisque.

Heading B

Aenean cursus ante quis diam bibendum, sed varius massa placerat. Integer sed dictum libero. Vivamus in iaculis ligula, id placerat lectus. Fusce cursus nunc non lacinia consectetur. Vivamus dictum neque dolor, nec dictum purus dapibus ut. Maecenas imperdiet lectus sit amet tincidunt eleifend. Proin at ultrices purus, vel aliquam massa. Quisque volutpat mi a iaculis fermentum. Pellentesque a ligula sem.
<h3 class="acc_trigger"><a href="#">Heading A</a></h3>
<div class="acc_container">
<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum aliquet augue, non pretium justo egestas ac. Integer vitae augue convallis, sollicitudin mauris in, adipiscing nisi. Donec varius laoreet dignissim. Nulla vel varius lacus. Nullam tincidunt at nunc mattis pulvinar. Vestibulum et turpis non diam hendrerit pharetra vel at tellus. Nulla convallis fermentum lorem id laoreet. Proin elementum sed massa quis scelerisque. </div>
</div>

Accordion Boxed

+ Expand All

Heading C

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum aliquet augue, non pretium justo egestas ac. Integer vitae augue convallis, sollicitudin mauris in, adipiscing nisi. Donec varius laoreet dignissim. Nulla vel varius lacus. Nullam tincidunt at nunc mattis pulvinar. Vestibulum et turpis non diam hendrerit pharetra vel at tellus. Nulla convallis fermentum lorem id laoreet. Proin elementum sed massa quis scelerisque.

Heading D

Aenean cursus ante quis diam bibendum, sed varius massa placerat. Integer sed dictum libero. Vivamus in iaculis ligula, id placerat lectus. Fusce cursus nunc non lacinia consectetur. Vivamus dictum neque dolor, nec dictum purus dapibus ut. Maecenas imperdiet lectus sit amet tincidunt eleifend. Proin at ultrices purus, vel aliquam massa. Quisque volutpat mi a iaculis fermentum. Pellentesque a ligula sem. Proin in ligula ut odio congue tincidunt eget sed felis. Donec sit amet lorem consectetur, scelerisque neque a, rhoncus mauris. Etiam sed imperdiet elit.
<p>Accordion Boxed</p>
<h3 class="acc_trigger boxed-gray"><a href="#">Heading C</a></h3>
<div class="acc_container">
<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum aliquet augue, non pretium justo egestas ac. Integer vitae augue convallis, sollicitudin mauris in, adipiscing nisi. Donec varius laoreet dignissim. Nulla vel varius lacus. Nullam tincidunt at nunc mattis pulvinar. Vestibulum et turpis non diam hendrerit pharetra vel at tellus. Nulla convallis fermentum lorem id laoreet. Proin elementum sed massa quis scelerisque. </div>
</div>
+ Expand All

Heading E

Proin at ultrices purus, vel aliquam massa. Quisque volutpat mi a iaculis fermentum. Pellentesque a ligula sem. Proin in ligula ut odio congue tincidunt eget sed felis. Donec sit amet lorem consectetur, scelerisque neque a, rhoncus mauris. Etiam sed imperdiet elit. Aenean cursus ante quis diam bibendum, sed varius massa placerat. Integer sed dictum libero. Vivamus in iaculis ligula, id placerat lectus. Fusce cursus nunc non lacinia consectetur. Vivamus dictum neque dolor, nec dictum purus dapibus ut. Maecenas imperdiet lectus sit amet tincidunt eleifend.

Heading F

Proin at ultrices purus, vel aliquam massa. Quisque volutpat mi a iaculis fermentum. Pellentesque a ligula sem. Proin in ligula ut odio congue tincidunt eget sed felis. Donec sit amet lorem consectetur, scelerisque neque a, rhoncus mauris. Etiam sed imperdiet elit. Aenean cursus ante quis diam bibendum, sed varius massa placerat. Integer sed dictum libero. Vivamus in iaculis ligula, id placerat lectus. Fusce cursus nunc non lacinia consectetur. Vivamus dictum neque dolor, nec dictum purus dapibus ut. Maecenas imperdiet lectus sit amet tincidunt eleifend.
<h3 class="acc_trigger divider-gray"><a href="#">Heading E</a></h3>
<div class="acc_container">
<div class="block"> Proin at ultrices purus, vel aliquam massa. Quisque volutpat mi a iaculis fermentum. Pellentesque a ligula sem. Proin in ligula ut odio congue tincidunt eget sed felis. Donec sit amet lorem consectetur, scelerisque neque a, rhoncus mauris. Etiam sed imperdiet elit. Aenean cursus ante quis diam bibendum, sed varius massa placerat. Integer sed dictum libero. Vivamus in iaculis ligula, id placerat lectus. Fusce cursus nunc non lacinia consectetur. Vivamus dictum neque dolor, nec dictum purus dapibus ut. Maecenas imperdiet lectus sit amet tincidunt eleifend.
</div></div>