Accordion

Home / Shortcodes / Accordion

Accordion

[highlight bgcolor=”#1e73be” text_color=”#ffffff” type=”highlight1″]Parameters for the Accordion[/highlight]
[divider style=”thin” margin=”20px 0″ bordercolor=”#dddddd”]
[list icon=”fa-angle-right” color=”#81d742″]
Type of Accordion: Normal/FAQ
Type of mode: Toggle/Accordion
Accordion Title: Title text for Accordion
Accordion Limit: Select toggle rows you wish to display, 2,3 or 4
Animations: Select an animation effect for the element
Advanced Options: Animation Duration, Delay and Iteration Options
[/list]
[divider style=”thin” margin=”20px 0″ bordercolor=”#dddddd”]

Standard Accordion with toggle mode,type=”normal” and active=”true”

[accordion-wrap type=”normal” mode=”toggle”]
[accordion title=”Aenean venenatis” icon=”fa fa-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=”Aenean venenatis” icon=”fa fa-compass” active=”false”]
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]
[demo_space height=”10px”]

Get The Code:

[accordion-wrap type="normal" mode="toggle"]
[accordion title="Title Here" icon="fa fa-compass" active="true"]Content Here....[/accordion]
[accordion title="Title Here" icon="fa fa-compass" active="false"]Content Here....[/accordion]
[/accordion-wrap]

[divider style=”thin” margin=”20px 0 20px 0″]

Standard Accordion with toggle mode,type=”faq” and active=”true”

[accordion-wrap type=”faq” mode=”toggle”]
[accordion title=”Aenean venenatis” icon=”fa fa-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=”Aenean venenatis” icon=”fa fa-compass” active=”false”]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-wrap]
[divider style=”thin” margin=”60px 0 40px 0″]
Get The Code:

[accordion-wrap type="faq" mode="toggle"]
[accordion title="Title Here" icon="fa fa-compass" active="true"]Content Here....[/accordion]
[accordion title="Title Here" icon="fa fa-compass" active="false"]Content Here....[/accordion]
[/accordion-wrap]

[divider style=”thin” margin=”20px 0 20px 0″]

Standard Accordion with toggle mode,type=”faq” and active=”true”

[accordion-wrap type=”faq” mode=”toggle”]
[accordion title=”Aenean venenatis” icon=”fa fa-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=”Aenean venenatis” icon=”fa fa-compass” active=”false”]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-wrap]
[divider style=”thin” margin=”60px 0 40px 0″]
Get The Code:

[accordion-wrap type="faq" mode="toggle"]
[accordion title="Title Here" icon="fa fa-compass" active="true"]Content Here....[/accordion]
[accordion title="Title Here" icon="fa fa-compass" active="false"]Content Here....[/accordion]
[/accordion-wrap]

[divider style=”thin” margin=”20px 0 20px 0″]

Standard Accordion with accordion mode,type=”normal” and active=”true”

[accordion-wrap type=”normal” mode=”accordion”]
[accordion title=”Aenean venenatis” icon=”fa fa-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=”Aenean venenatis” icon=”fa fa-compass” active=”false”]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-wrap]
[divider style=”thin” margin=”60px 0 40px 0″]
Get The Code:

[accordion-wrap type="normal" mode="accordion"]
[accordion title="Title Here" icon="fa fa-compass" active="true"]Content Here....[/accordion]
[accordion title="Title Here" icon="fa fa-compass" active="false"]Content Here....[/accordion]
[/accordion-wrap]

[divider style=”thin” margin=”20px 0 20px 0″]

Standard Accordion with accordion mode,type=”faq” and active=”false”

[accordion-wrap type=”faq” mode=”accordion”]
[accordion title=”Aenean venenatis” icon=”fa fa-compass” active=”false”]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” icon=”fa fa-compass” active=”false”]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-wrap]
[divider style=”thin” margin=”60px 0 40px 0″]
Get The Code:

[accordion-wrap type="faq" mode="accordion"]
[accordion title="Title Here" icon="fa fa-compass" active="false"]Content Here....[/accordion]
[accordion title="Title Here" icon="fa fa-compass" active="false"]Content Here....[/accordion]
[/accordion-wrap]

[divider style=”thin” margin=”20px 0 20px 0″]

Standard Accordion with animation

[accordion-wrap animation=”fadeInRight” duration=”1s” delay=”0.2s” type=”normal” iteration=”4″ mode=”toggle”]
[accordion title=”Title Here” icon=”fa fa-compass” active=”false”]Content Here[/accordion]
[accordion title=”Title Here” icon=”fa fa-compass” active=”false”]Content Here[/accordion]
[/accordion-wrap]
[divider style=”thin” margin=”60px 0 40px 0″]
Get The Code:

[accordion-wrap animation="" duration="" delay="" type="" iteration="" type="normal" mode="accordion"]
[accordion title="Title Here" icon="fa fa-compass" active="false"]Content Here....[/accordion]
[accordion title="Title Here" icon="fa fa-compass" active="false"]Content Here....[/accordion]
[/accordion-wrap]

Leave a Reply

Your email address will not be published.