Accordion

Multiple Accordion Styles.

[demo_space height=”30px”]
[fancyheading heading=”h5″ align=”textleft”]Standard Accordion[/fancyheading]
[demo_space height=”10px”]
[accordion-wrap]
[accordion title=”Aenean venenatis posuere aliquet”]
Aenean venenatis posuere aliquet. Duis sollicitudin augue quis nulla dignissim aliquam. Ut consectetur aliquam diam at consequat. Etiam laoreet orci at tortor convallis convallis. Vestibulum fringilla erat quam, ac cursus mi iaculis vitae.
[/accordion]
[accordion title=”Class aptent taciti sociosq”]
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Aenean venenatis posuere aliquet. Duis sollicitudin augue quis nulla dignissim aliquam. Ut consectetur aliquam diam at consequat. Etiam laoreet orci at tortor convallis convallis. Vestibulum fringilla erat quam, ac cursus mi iaculis vitae.
[/accordion]
[accordion title=”Aenean venenatis posuere”]
Aenean venenatis posuere aliquet. Duis sollicitudin augue quis nulla dignissim aliquam. Ut consectetur aliquam diam at consequat. Etiam laoreet orci at tortor convallis convallis. Vestibulum fringilla erat quam, ac cursus mi iaculis vitae.
[/accordion]
[/accordion-wrap]

[divider style=”dotted” margin=”40px 0 40px 0″]

[fancyheading heading=”h5″ align=”textleft”]Accordion with active=”true”[/fancyheading]
[demo_space height=”10px”]

[accordion-wrap]
[accordion title=”Aenean venenatis posuere aliquet” active=”true”]
Aenean venenatis posuere aliquet. Duis sollicitudin augue quis nulla dignissim aliquam. Ut consectetur aliquam diam at consequat. Etiam laoreet orci at tortor convallis convallis. Vestibulum fringilla erat quam, ac cursus mi iaculis vitae.
[/accordion]
[accordion title=”Class aptent taciti sociosq”]
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Aenean venenatis posuere aliquet. Duis sollicitudin augue quis nulla dignissim aliquam. Ut consectetur aliquam diam at consequat. Etiam laoreet orci at tortor convallis convallis. Vestibulum fringilla erat quam, ac cursus mi iaculis vitae.
[/accordion]
[accordion title=”Aenean venenatis posuere”]
Aenean venenatis posuere aliquet. Duis sollicitudin augue quis nulla dignissim aliquam. Ut consectetur aliquam diam at consequat. Etiam laoreet orci at tortor convallis convallis. Vestibulum fringilla erat quam, ac cursus mi iaculis vitae.
[/accordion]
[/accordion-wrap]

[divider style=”dotted” margin=”40px 0 40px 0″]

[fancyheading heading=”h5″ align=”textleft”]Accordion with font awesome icon and active=”true”[/fancyheading]
[demo_space height=”10px”]

[accordion-wrap]
[accordion title=”Aenean venenatis posuere aliquet” icon=”icon-compass” active=”true”]
Aenean venenatis posuere aliquet. Duis sollicitudin augue quis nulla dignissim aliquam. Ut consectetur aliquam diam at consequat. Etiam laoreet orci at tortor convallis convallis. Vestibulum fringilla erat quam, ac cursus mi iaculis vitae.
[/accordion]
[accordion title=”Class aptent taciti sociosq” icon=”icon-sort-by-attributes-alt”]
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Aenean venenatis posuere aliquet. Duis sollicitudin augue quis nulla dignissim aliquam. Ut consectetur aliquam diam at consequat. Etiam laoreet orci at tortor convallis convallis. Vestibulum fringilla erat quam, ac cursus mi iaculis vitae.
[/accordion]
[accordion title=”Aenean venenatis posuere” icon=”icon-file”]
Aenean venenatis posuere aliquet. Duis sollicitudin augue quis nulla dignissim aliquam. Ut consectetur aliquam diam at consequat. Etiam laoreet orci at tortor convallis convallis. Vestibulum fringilla erat quam, ac cursus mi iaculis vitae.
[/accordion]
[/accordion-wrap]

[divider style=”thin” margin=”60px 0 40px 0″]
Get The Code:
[demo_space height=”20px”]
[accordion-wrap]
[accordion title="Title Here" icon="icon-file" active="false"]Content Here...[/accordion]
[accordion title="Title Here" icon="icon-file" active="false"]Content Here...[/accordion]
[accordion title="Title Here" icon="icon-file" active="false"]Content Here...[/accordion]
[/accordion-wrap]

[divider style=”thin” margin=”40px 0 40px 0″]
Customization Options and Features:
[demo_space height=”20px”]
[list style=”square” color=”black”]

  • Accordion Title: Title text for Accordion
  • Accordion Content: Type the content for Accordion
  • Font-awesome Icon: Enter the class of Font-awesome Icon
  • Accordion Tab Active: Set “true” if you wish to Active Tab.

[/list]