Accordion & Toggle

Accordion & Toggle 2013-05-17T14:08:25+00:00

Accordions are the codes which allow you to add multiple sections of information along with ease to vary content and titles to your choice. Accordions are used when you want the reader to only see one section at a time. Toggles are the codes which allow you to add multiple sections of information along with ease to vary content and titles to your choice, toggles are the codes to enable reader to open multiple sections at a time.

Accordian Style

[accordion]
[accordion_item active=”yes” icon=”icon-twitter” title=”Accordion Title 1″ accordion=”accordion”]Nulla adipiscing ipsum sit amet neque egestas sagittis. Sed eleifend ligula vel velit porta nec ullamcorper mauris ultricies. Sed facilisis ultricies velit at pharetra. Sed pellentesque adipiscing luctus. Ut risus nisl, tristique ac pretium non, consequat quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam auctor, magna viverra malesuada tempus, arcu quam eleifend sem, ut tempus magna tortor sed lacus. Phasellus dictum mattis ornare. Ut laoreet, risus ut ultrices sagittis, lorem nibh ultricies velit, non convallis purus ipsum sit amet nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac arcu aliquet sem varius interdum vel quis odio.[/accordion_item]
[accordion_item title=”Accordion Title 2″ accordion=”accordion”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac arcu aliquet sem varius interdum vel quis odio. Nulla adipiscing ipsum sit amet neque egestas sagittis. Sed eleifend ligula vel velit porta nec ullamcorper mauris ultricies. Sed facilisis ultricies velit at pharetra. Sed pellentesque adipiscing luctus. Ut risus nisl, tristique ac pretium non, consequat quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam auctor, magna viverra malesuada tempus, arcu quam eleifend sem, ut tempus magna tortor sed lacus. Phasellus dictum mattis ornare. Ut laoreet, risus ut ultrices sagittis, lorem nibh ultricies velit, non convallis purus ipsum sit amet nunc.[/accordion_item]
[accordion_item title=”Accordion Title 3″ accordion=”accordion”]Nulla adipiscing ipsum sit amet neque egestas sagittis. Sed eleifend ligula vel velit porta nec ullamcorper mauris ultricies. Sed facilisis ultricies velit at pharetra. Sed pellentesque adipiscing luctus. Ut risus nisl, tristique ac pretium non, consequat quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam auctor, magna viverra malesuada tempus, arcu quam eleifend sem, ut tempus magna tortor sed lacus. Phasellus dictum mattis ornare. Ut laoreet, risus ut ultrices sagittis, lorem nibh ultricies velit, non convallis purus ipsum sit amet nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac arcu aliquet sem varius interdum vel quis odio.[/accordion_item]
[/accordion]

[code title=”Acordian code goes here”]
[accordion]
[accordion_item active=”yes” icon=”icon-twitter” title=”Accordion Title 1″ accordion=”accordion”]Accordion Content 1[/accordion_item]
[accordion_item title=”Accordion Title 2″ accordion=”accordion”]Accordion Content 2[/accordion_item]
[accordion_item title=”Accordion Title 3″ accordion=”accordion”]Accordion Content 3[/accordion_item]
[/accordion]
[/code]

Accordian without Icon

[accordion]
[accordion_item active=”” icon=”” title=”Accordion Title 1″ accordion=”accordion”]Nulla adipiscing ipsum sit amet neque egestas sagittis. Sed eleifend ligula vel velit porta nec ullamcorper mauris ultricies. Sed facilisis ultricies velit at pharetra. Sed pellentesque adipiscing luctus. Ut risus nisl, tristique ac pretium non, consequat quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam auctor, magna viverra malesuada tempus, arcu quam eleifend sem, ut tempus magna tortor sed lacus. Phasellus dictum mattis ornare. Ut laoreet, risus ut ultrices sagittis, lorem nibh ultricies velit, non convallis purus ipsum sit amet nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac arcu aliquet sem varius interdum vel quis odio.[/accordion_item]
[accordion_item title=”Accordion Title 2″ accordion=”accordion”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac arcu aliquet sem varius interdum vel quis odio. Nulla adipiscing ipsum sit amet neque egestas sagittis. Sed eleifend ligula vel velit porta nec ullamcorper mauris ultricies. Sed facilisis ultricies velit at pharetra. Sed pellentesque adipiscing luctus. Ut risus nisl, tristique ac pretium non, consequat quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam auctor, magna viverra malesuada tempus, arcu quam eleifend sem, ut tempus magna tortor sed lacus. Phasellus dictum mattis ornare. Ut laoreet, risus ut ultrices sagittis, lorem nibh ultricies velit, non convallis purus ipsum sit amet nunc.[/accordion_item]
[accordion_item title=”Accordion Title 3″ accordion=”accordion”]Nulla adipiscing ipsum sit amet neque egestas sagittis. Sed eleifend ligula vel velit porta nec ullamcorper mauris ultricies. Sed facilisis ultricies velit at pharetra. Sed pellentesque adipiscing luctus. Ut risus nisl, tristique ac pretium non, consequat quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam auctor, magna viverra malesuada tempus, arcu quam eleifend sem, ut tempus magna tortor sed lacus. Phasellus dictum mattis ornare. Ut laoreet, risus ut ultrices sagittis, lorem nibh ultricies velit, non convallis purus ipsum sit amet nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac arcu aliquet sem varius interdum vel quis odio.[/accordion_item]
[/accordion]

[code title=”Accordian code goes here”]
[accordion]
[accordion_item active=”” icon=”” title=”Accordion Title 1″ accordion=”accordion”]Accordion Content 1[/accordion_item]
[accordion_item title=”Accordion Title 2″ accordion=”accordion”]Accordion Content 2[/accordion_item]
[accordion_item title=”Accordion Title 3″ accordion=”accordion”]Accordion Content 3[/accordion_item]
[/accordion]
[/code]

Toggle Style

[toggle active=”yes” title=”Toggle Title 1″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac arcu aliquet sem varius interdum vel quis odio. Nulla adipiscing ipsum sit amet neque egestas sagittis. Sed eleifend ligula vel velit porta nec ullamcorper mauris ultricies. Sed facilisis ultricies velit at pharetra. Sed pellentesque adipiscing luctus. Ut risus nisl, tristique ac pretium non, consequat quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam auctor, magna viverra malesuada tempus, arcu quam eleifend sem, ut tempus magna tortor sed lacus. Phasellus dictum mattis ornare. Ut laoreet, risus ut ultrices sagittis, lorem nibh ultricies velit, non convallis purus ipsum sit amet nunc.[/toggle]
[toggle active=”no” title=”Toggle Title 2″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac arcu aliquet sem varius interdum vel quis odio. Nulla adipiscing ipsum sit amet neque egestas sagittis. Sed eleifend ligula vel velit porta nec ullamcorper mauris ultricies. Sed facilisis ultricies velit at pharetra. Sed pellentesque adipiscing luctus. Ut risus nisl, tristique ac pretium non, consequat quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam auctor, magna viverra malesuada tempus, arcu quam eleifend sem, ut tempus magna tortor sed lacus. Phasellus dictum mattis ornare. Ut laoreet, risus ut ultrices sagittis, lorem nibh ultricies velit, non convallis purus ipsum sit amet nunc.[/toggle]
[toggle active=”no” title=”Toggle Title 3″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac arcu aliquet sem varius interdum vel quis odio. Nulla adipiscing ipsum sit amet neque egestas sagittis. Sed eleifend ligula vel velit porta nec ullamcorper mauris ultricies. Sed facilisis ultricies velit at pharetra. Sed pellentesque adipiscing luctus. Ut risus nisl, tristique ac pretium non, consequat quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam auctor, magna viverra malesuada tempus, arcu quam eleifend sem, ut tempus magna tortor sed lacus. Phasellus dictum mattis ornare. Ut laoreet, risus ut ultrices sagittis, lorem nibh ultricies velit, non convallis purus ipsum sit amet nunc.[/toggle]
[toggle active=”no” title=”Toggle Title 4″]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac arcu aliquet sem varius interdum vel quis odio. Nulla adipiscing ipsum sit amet neque egestas sagittis. Sed eleifend ligula vel velit porta nec ullamcorper mauris ultricies. Sed facilisis ultricies velit at pharetra. Sed pellentesque adipiscing luctus. Ut risus nisl, tristique ac pretium non, consequat quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam auctor, magna viverra malesuada tempus, arcu quam eleifend sem, ut tempus magna tortor sed lacus. Phasellus dictum mattis ornare. Ut laoreet, risus ut ultrices sagittis, lorem nibh ultricies velit, non convallis purus ipsum sit amet nunc.[/toggle]
[code title=”Toggle Shortcode goes here”]
[toggle active=”yes” title=”Toggle Title 1″]Toggle Content 1[/toggle]
[/code]

Customization Options / Features

[list type=”tick” icon=”icon-ok”]
[list_item]One page can have unlimited accordions.[/list_item]
[list_item]It offers to insert images, graphics, or other short codes in the text description area[/list_item]
[list_item]Each set can have unlimited accordion-items within it.[/list_item]
[list_item]A specific toggle can be set to be open by default when the page loads[/list_item]
[list_item]One page can have unlimited toggles. [/list_item]
[list_item]It offers to insert images, graphics, or other short codes in the text description area[/list_item]
[list_item]Each set can have unlimited toggle-items within it. [/list_item]
[list_item]A specific toggle can be set to be open by default when the page loads[/list_item]
[/list]