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]

 

Author

  • Jens Cornelissen

    Jens Cornelissen has been writing for over two decades – initially for general newspapers in his home country Germany. After receiving an MA degree in Communications, he joined a new media start-up in Amsterdam as consultant on new media technologies and country editor for two daily newsletters. In his current day job, Jens runs the global conference division for Merlien’s dedicated marketing research events. Jens is a trained journalist with a BA in Journalism from Westminster University in London and has authored several media industry reports and articles on mobile and media technology.

Leave a Reply

Your email address will not be published. Required fields are marked *