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]

 

เพิ่มความเห็น

คลิกที่นี่เพื่อแสดงความคิดเห็น