Accordions & Toggles

Accordions & Toggles

Multiple Handles

[divide icon=»square» icon_position=»left» margin_top=»20″ margin_bottom=»30″ width=»long»][one_third][accordions direction=»vertical» handle=»arrows» space=»no» ]
[accordion title=»Vestibulum id ligula» ]Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum [/accordion]
[accordion title=»mattis consectetu» ]Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Maecenas sed diam [/accordion]
[accordion title=»varius blandit sit » ]eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.[/accordion]
[/accordions] [/one_third]

[one_third][accordions direction=»vertical» handle=»pm» space=»no» ][accordion title=»Vestibulum id ligula» ]Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum [/accordion]
[accordion title=»mattis consectetu» ]Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Maecenas sed diam [/accordion]
[accordion title=»varius blandit sit » ]eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.[/accordion]
[/accordions] [/one_third]

[one_third_last][accordions direction=»vertical» handle=»numbers» space=»no» ]
[accordion title=»Vestibulum id ligula» ]Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum [/accordion]
[accordion title=»mattis consectetu» ]Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Maecenas sed diam [/accordion]
[accordion title=»varius blandit sit » ]eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.[/accordion]
[/accordions][/one_third_last]

[accordions direction=»vertical» handle=»» space=»no» ]
[accordion title=»venenatis dapibus posuere» ]Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.[/accordion]
[accordion title=»commodo cursus magna» ]Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.[/accordion]
[accordion title=»Donec sed odio dui.» ]Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.[/accordion]
[accordion title=»vel scelerisque nisl» ]Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.[/accordion]
[/accordions]

[gap]

With Spaces

[divide icon=»square» icon_position=»left» margin_top=»20″ margin_bottom=»30″ width=»long»]

[one_half][accordions direction=»vertical» handle=»arrows» space=»yes» ]
[accordion title=»venenatis dapibus posuere» ]Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.[/accordion]
[accordion title=»commodo cursus magna» ]Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.[/accordion]
[accordion title=»Donec sed odio dui.» ]Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.[/accordion]
[/accordions][/one_half]

[one_half_last]

[accordions direction=»vertical» handle=»pm» space=»yes» ]

[accordion title=»Donec sed odio dui.» ]Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.[/accordion]
[accordion title=»venenatis dapibus posuere» ]Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.[/accordion]
[accordion title=»commodo cursus magna» ]Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.[/accordion]
[/accordions]

[/one_half_last]

[gap]

With Icons

[divide icon=»square» icon_position=»left» margin_top=»20″ margin_bottom=»30″ width=»long»]

[one_half][accordions direction=»vertical» handle=»arrows» space=»no» ]
[accordion title=»Real Responsive Design» icon=»linecon-icon-settings»]Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo[/accordion]
[accordion title=»Huge Options Panel» icon=»linecon-icon-bulb» ]Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo[/accordion]
[accordion title=»Unbelievable shortcodes» icon=»linecon-icon-pen» ]Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo[/accordion]
[accordion title=»Easy As Cake» icon=»linecon-icon-diamond» ]Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo[/accordion]
[/accordions][/one_half][one_half_last][accordions direction=»vertical» handle=»arrows» space=»no» icon_color=»#c74c4c» icon_current_color=»#ffa507″]
[accordion title=»Real Responsive Design» icon=»linecon-icon-like» ]Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo[/accordion]
[accordion title=»Huge Options Panel» icon=»linecon-icon-params» ]Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo[/accordion]
[accordion title=»Unbelievable shortcodes» icon=»linecon-icon-fire» ]Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo[/accordion]
[accordion title=»Easy As Cake» icon=»linecon-icon-truck» ]Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo[/accordion]
[/accordions]

[/one_half_last]

[gap]

Toggles

[divide icon=»square» icon_position=»left» margin_top=»20″ margin_bottom=»30″ width=»long»]

[one_third][accordions type=»toggle» handle=»arrows» space=»no» ]
[accordion title=»Real Responsive Design» ] Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum[/accordion]
[accordion title=»Huge Options Panel» ] Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum [/accordion]
[accordion title=»Unbelievable shortcodes» ] Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum [/accordion]
[accordion title=»Easy As Cake» ] Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum [/accordion]
[/accordions] [/one_third]

[one_third][accordions type=»toggle» handle=»pm» space=»no» ]
[accordion title=»Real Responsive Design» ] Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum[/accordion]
[accordion title=»Huge Options Panel» ] Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum [/accordion]
[accordion title=»Unbelievable shortcodes» ] Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum [/accordion]
[accordion title=»Easy As Cake» ] Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum [/accordion]
[/accordions][/one_third]

[one_third_last][accordions type=»toggle» handle=»numbers» space=»no» ]
[accordion title=»Real Responsive Design» ] Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum[/accordion]
[accordion title=»Huge Options Panel» ] Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum [/accordion]
[accordion title=»Unbelievable shortcodes» ] Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum [/accordion]
[accordion title=»Easy As Cake» ] Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum [/accordion]
[/accordions] [/one_third_last]

[gap]

How Toggles Start

[divide icon=»square» icon_position=»left» margin_top=»20″ margin_bottom=»30″ width=»long»]

[one_third]

[accordions type=»toggle» handle=»arrows» space=»no» ]
[accordion title=»Real Responsive Design» state=»open» ] Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo [/accordion]
[accordion title=»Huge Options Panel» state=»open» ] Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo [/accordion]
[accordion title=»Unbelievable shortcodes» state=»open» ] Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo [/accordion]
[accordion title=»Easy As Cake» state=»open» ] Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo [/accordion]
[/accordions]

[/one_third]

[one_third]

[accordions type=»toggle» handle=»arrows» space=»yes» ]
[accordion title=»Real Responsive Design» state=»close» ] Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo [/accordion]
[accordion title=»Huge Options Panel» state=»open» ] Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo [/accordion]
[accordion title=»Unbelievable shortcodes» state=»close» ] Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo [/accordion]
[accordion title=»Easy As Cake» state=»open» ] Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo [/accordion]
[/accordions]

[/one_third]

[one_third_last]

[accordions type=»toggle» handle=»arrows» space=»no» ]
[accordion title=»Real Responsive Design» state=»open» ] Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo [/accordion]
[accordion title=»Huge Options Panel» state=»close» ] Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo [/accordion]
[accordion title=»Unbelievable shortcodes» state=»close» ] Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo [/accordion]
[accordion title=»Easy As Cake» state=»open» ] Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo [/accordion]
[/accordions]

[/one_third_last]

[gap]

 

loading...