Accordion & Toggles
[lead]Accordions Toggles are typically used to toggle extra information. They help to organize and de-clutter information. Accordions display only one section at a time while Toggles are able to display multiple sections at a time. [/lead]
- Use unlimited Accordion / Toggles on a single page
- Choose from accordion mode or toggle mode
- Insert images, graphics, or any other html element
- Set a specific toggle to be open by default when the page loads
[row xclass=”sp-b-40″]
[column lg=”6″]
Accordion
[collapsibles accordion=”true”] [collapse title=”You can use unlimited Accordion / Toggles on a single page” id=”b1″] Praesent semper, quam at gravida imperdiet, metus ipsum luctus nunc, vitae faucibus sapien sapien vitae neque. Sed sit amet lacus ipsum, et venenatis purus. Praesent neque lorem, tincidunt vel placerat feugiat, rutrum ac erat. [/collapse] [collapse title=”You can choose from accordion mode or toggle mode” id=”b2″] Praesent semper, quam at gravida imperdiet, metus ipsum luctus nunc, vitae faucibus sapien sapien vitae neque. Sed sit amet lacus ipsum, et venenatis purus. Praesent neque lorem, tincidunt vel placerat feugiat, rutrum ac erat. [/collapse] [collapse title=”Insert images, graphics, or any other html element” id=”b3″] Praesent semper, quam at gravida imperdiet, metus ipsum luctus nunc, vitae faucibus sapien sapien vitae neque. Sed sit amet lacus ipsum, et venenatis purus. Praesent neque lorem, tincidunt vel placerat feugiat, rutrum ac erat. [/collapse] [collapse title=”Set a specific toggle to be open by default when the page loads” id=”b4″] Praesent semper, quam at gravida imperdiet, metus ipsum luctus nunc, vitae faucibus sapien sapien vitae neque. Sed sit amet lacus ipsum, et venenatis purus. Praesent neque lorem, tincidunt vel placerat feugiat, rutrum ac erat. [/collapse] [/collapsibles] [/column]
[column lg=”6″]
Toggle
[collapsibles] [collapse title=”You can use unlimited Accordion / Toggles on a single page” id=”b1″] Praesent semper, quam at gravida imperdiet, metus ipsum luctus nunc, vitae faucibus sapien sapien vitae neque. Sed sit amet lacus ipsum, et venenatis purus. Praesent neque lorem, tincidunt vel placerat feugiat, rutrum ac erat. [/collapse] [collapse title=”You can choose from accordion mode or toggle mode” id=”b2″] Praesent semper, quam at gravida imperdiet, metus ipsum luctus nunc, vitae faucibus sapien sapien vitae neque. Sed sit amet lacus ipsum, et venenatis purus. Praesent neque lorem, tincidunt vel placerat feugiat, rutrum ac erat. [/collapse] [collapse title=”Insert images, graphics, or any other html element” id=”b3″] Praesent semper, quam at gravida imperdiet, metus ipsum luctus nunc, vitae faucibus sapien sapien vitae neque. Sed sit amet lacus ipsum, et venenatis purus. Praesent neque lorem, tincidunt vel placerat feugiat, rutrum ac erat. [/collapse] [collapse title=”Set a specific toggle to be open by default when the page loads” id=”b4″] Praesent semper, quam at gravida imperdiet, metus ipsum luctus nunc, vitae faucibus sapien sapien vitae neque. Sed sit amet lacus ipsum, et venenatis purus. Praesent neque lorem, tincidunt vel placerat feugiat, rutrum ac erat. [/collapse] [/collapsibles] [/column]
[/row]
Set a specific toggle to be open by default when the page loads
[collapsibles accordion=”true”]
[collapse title=”You can use unlimited Accordion / Toggles on a single page” id=”b1″]
Praesent semper, quam at gravida imperdiet, metus ipsum luctus nunc, vitae faucibus sapien sapien vitae neque. Sed sit amet lacus ipsum, et venenatis purus. Praesent neque lorem, tincidunt vel placerat feugiat, rutrum ac erat.
[/collapse]
[collapse title=”You can choose from accordion mode (only one open element) or toggle mode (multiple open elmenets)” id=”b2″]
Praesent semper, quam at gravida imperdiet, metus ipsum luctus nunc, vitae faucibus sapien sapien vitae neque. Sed sit amet lacus ipsum, et venenatis purus. Praesent neque lorem, tincidunt vel placerat feugiat, rutrum ac erat.
[/collapse]
[collapse title=”Insert images, graphics, or any other html element” active=”true” id=”b3″]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien.
[/collapse]
[collapse title=”Set a specific toggle to be open by default when the page loads” id=”b4″]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien.
[/collapse]
[/collapsibles]