Accordion demo
A simple but beautiful accordion to better organize content.
Can easily be used as a Frequently Asked Questions element.
You can modify the animation speed of the accordion as well as choose to wether use the element as an accordion or toggle,
toggle will allow you to open multiple hidden elements at the same time.
Select as well which title will be shown as active (opened) on page load.
The elements can be rearranged as needed and new elements can be included at any position within the element.
Can easily be used as a Frequently Asked Questions element.
You can modify the animation speed of the accordion as well as choose to wether use the element as an accordion or toggle,
toggle will allow you to open multiple hidden elements at the same time.
Select as well which title will be shown as active (opened) on page load.
The elements can be rearranged as needed and new elements can be included at any position within the element.
All closed
|
The example on the right shows all elements closed on page load. |
Accordion title 1Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. Accordion title 2Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. Accordion title 3Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. |
|
Toggle title 1Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. Toggle title 2Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. Toggle title 3Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. |
The example on the left shows element 3 active on page load. Animation is set to 1000ms. Arrows are used. Toggle functionality is switched on |
Colors and more
|
Style the accordion as needed, set colors for title and its background as well as for the border and the content area. Titles can have custom font applied. |
Example 1A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. Example 2A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. Example 3A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. |
Nesting accordions
The example below shows nested accordions.
Within tab 1 of the outer accordion is a new accordion.
Within tab 1 of the outer accordion is a new accordion.
Outer 1
Outer 1 content
Inner 1
Inner 1 content
Inner 2
Inner 2 content
Inner 3
Inner 3 content
Outer 2
Outer 2 content
Outer 3
Outer 3 content