Accordions & Toggles

{headline type=”h2″ style=”heading-single” color=”color-theme” text=”Accordion Style 1″}

This is a default Accordion (in this example as a Joomla Module), the first Tab is open for default.

{spacer height=”10px”} {loadposition accordion1} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Accordion Style 2″}

This is a default Accordion with Style 2 (in this example as a Joomla Module), no Tab is open for default.

{spacer height=”10px”} {loadposition accordion2} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Accordion Style 3″}

This is a default Accordion (in this example as a Joomla Module), the second Tab is open for default and in the tile are Icons.

{spacer height=”10px”} {loadposition accordion3} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Toggle as Shortcode Style 1 – closed”}

This is a default Toggle (in this example as a Joomla Shortcode). A Toggle is when several Items can be opened at the same time.

{spacer height=”10px”} {toggle1 title=”Toggle 1″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle1 title=”Toggle 2″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle1 title=”Toggle 3″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Toggle as Shortcode Style 1 – open”}

This is a default Toggle (in this example as a Joomla Shortcode). A Toggle is when several Items can be opened at the same time.

{spacer height=”10px”} {toggle1-open title=”Toggle 1″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle1-open title=”Toggle 2″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle1-open title=”Toggle 3″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Toggle as Shortcode Style 2 – closed”}

This is a default Toggle (in this example as a Joomla Shortcode). A Toggle is when several Items can be opened at the same time.

{spacer height=”10px”} {toggle2 title=”Toggle 1″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle2 title=”Toggle 2″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle2 title=”Toggle 3″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {spacer height=”40px”} {headline type=”h2″ style=”heading-single” color=”color-theme” text=”Toggle as Shortcode Style 2 – open”}

This is a default Toggle (in this example as a Joomla Shortcode). A Toggle is when several Items can be opened at the same time.

{spacer height=”10px”} {toggle2-open title=”Toggle 1″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle2-open title=”Toggle 2″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {toggle2-open title=”Toggle 3″}

Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

{/toggle} {spacer height=”40px”} {toggle1 title=”Shortcode”}

{toggle1 title="title"}Your Content here{/toggle} {toggle1-open title="title"}Your Content here{/toggle}  {toggle2 title="title"}Your Content here{/toggle} {toggle2-open title="title"}Your Content here{/toggle}

{/toggle}

Posted on by GM in Elements Leave a comment

Add a Comment