Accordion & Toggle

Accordion and toggle are perfectly suitable for FAQ sections. They generate accordion styled content areas which can contain various elements and shortcodes.

Accordion default

  • Section 1
    Nulla risus velit, ultrices sit amet congue at, fringilla ac sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pretium libero velit.
  • Section 2
    Sed arcu nunc, adipiscing ac dapibus id, pharetra sed nibh. Suspendisse ullamcorper tincidunt dui eget vehicula. Quisque aliquam ornare elit, sed varius orci malesuada nec. Fusce vitae pulvinar libero.
  • Section 3
    In hac habitasse platea dictumst. Suspendisse semper placerat diam, eu rutrum urna ultrices eu. In laoreet pharetra neque vitae semper. Nulla facilisi. Integer tristique rutrum vestibulum. Maecenas euismod orci sed dui hendrerit ut ultricies massa tristique.
[accordion]
[acc_item title="..." active="yes"] ... [/acc_item]
[acc_item title="..."] ... [/acc_item]
[acc_item title="..."] ... [/acc_item]
[/accordion]

Accordion custom

  • Section 1

    Headeline h3 of Section 1

    Nulla risus velit, ultrices sit amet congue at, fringilla ac sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pretium libero velit.

  • Section 2

    Headeline h3 of Section 2

    Sed arcu nunc, adipiscing ac dapibus id, pharetra sed nibh. Suspendisse ullamcorper tincidunt dui eget vehicula. Quisque aliquam ornare elit, sed varius orci malesuada nec. Fusce vitae pulvinar libero.

  • Section 3

    Headeline h3 of Section 3

    In hac habitasse platea dictumst. Suspendisse semper placerat diam, eu rutrum urna ultrices eu. In laoreet pharetra neque vitae semper. Nulla facilisi. Integer tristique rutrum vestibulum. Maecenas euismod orci sed dui hendrerit ut ultricies massa tristique.

[accordion]
[acc_item title="..."]
[headline tag="h3" color="color1"] ... [/headline] ...
[/acc_item]
[acc_item title="..."]
[headline tag="h3" color="color1"] ... [/headline] ...
[/acc_item]
[acc_item title="..."]
[headline tag="h3" color="color1"] ... [/headline] ...
[/acc_item]
[/accordion]

Accordion custom

  • Section 1

    Nulla risus velit, ultrices sit amet congue at, fringilla ac sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pretium libero velit.
  • Section 2

    Sed arcu nunc, adipiscing ac dapibus id, pharetra sed nibh. Suspendisse ullamcorper tincidunt dui eget vehicula. Quisque aliquam ornare elit, sed varius orci malesuada nec. Fusce vitae pulvinar libero.
  • Section 3

    In hac habitasse platea dictumst. Suspendisse semper placerat diam, eu rutrum urna ultrices eu. In laoreet pharetra neque vitae semper. Nulla facilisi. Integer tristique rutrum vestibulum. Maecenas euismod orci sed dui hendrerit ut ultricies massa tristique.
  • Section 4
    Suspendisse semper placerat diam, eu rutrum urna ultrices eu. In laoreet pharetra neque vitae semper. Nulla facilisi. Integer tristique rutrum vestibulum. Maecenas euismod orci sed dui hendrerit ut ultricies massa tristique.
[accordion tag="h3"]
[acc_item title="..."] ... [/acc_item]
[acc_item title="..." tag="h2"] ... [/acc_item]
[acc_item title="..." active="yes"] ... [/acc_item]
[acc_item title="..." tag="h6"] ... [/acc_item]
[/accordion]

Toggle default

  • Section 1
    Nulla risus velit, ultrices sit amet congue at, fringilla ac sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pretium libero velit.
  • Section 2
    Sed arcu nunc, adipiscing ac dapibus id, pharetra sed nibh. Suspendisse ullamcorper tincidunt dui eget vehicula. Quisque aliquam ornare elit, sed varius orci malesuada nec. Fusce vitae pulvinar libero.
  • Section 3
    In hac habitasse platea dictumst. Suspendisse semper placerat diam, eu rutrum urna ultrices eu. In laoreet pharetra neque vitae semper. Nulla facilisi. Integer tristique rutrum vestibulum. Maecenas euismod orci sed dui hendrerit ut ultricies massa tristique.
[toggle]
[tgg_item title="..." active="yes"] ... [/tgg_item]
[tgg_item title="..."] ... [/tgg_item]
[tgg_item title="..."] ... [/tgg_item]
[/toggle]

Toggle custom

  • Section 1

    Headeline h3 of Section 1

    Nulla risus velit, ultrices sit amet congue at, fringilla ac sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pretium libero velit.

  • Section 2

    Headeline h3 of Section 2

    Sed arcu nunc, adipiscing ac dapibus id, pharetra sed nibh. Suspendisse ullamcorper tincidunt dui eget vehicula. Quisque aliquam ornare elit, sed varius orci malesuada nec. Fusce vitae pulvinar libero.

  • Section 3

    Headeline h3 of Section 3

    In hac habitasse platea dictumst. Suspendisse semper placerat diam, eu rutrum urna ultrices eu. In laoreet pharetra neque vitae semper. Nulla facilisi. Integer tristique rutrum vestibulum. Maecenas euismod orci sed dui hendrerit ut ultricies massa tristique.

[toggle]
[tgg_item title="..."]
[headline tag="h3" color="color1"] ... [/headline] ...
[/tgg_item]
[tgg_item title="..."]
[headline tag="h3" color="color1"] ... [/headline] ...
[/tgg_item]
[tgg_item title="..."]
[headline tag="h3" color="color1"] ... [/headline] ...
[/tgg_item]
[/toggle]

Toggle custom

  • Section 1

    Nulla risus velit, ultrices sit amet congue at, fringilla ac sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pretium libero velit.
  • Section 2

    Sed arcu nunc, adipiscing ac dapibus id, pharetra sed nibh. Suspendisse ullamcorper tincidunt dui eget vehicula. Quisque aliquam ornare elit, sed varius orci malesuada nec. Fusce vitae pulvinar libero.
  • Section 3

    In hac habitasse platea dictumst. Suspendisse semper placerat diam, eu rutrum urna ultrices eu. In laoreet pharetra neque vitae semper. Nulla facilisi. Integer tristique rutrum vestibulum. Maecenas euismod orci sed dui hendrerit ut ultricies massa tristique.
  • Section 4
    Suspendisse semper placerat diam, eu rutrum urna ultrices eu. In laoreet pharetra neque vitae semper. Nulla facilisi. Integer tristique rutrum vestibulum. Maecenas euismod orci sed dui hendrerit ut ultricies massa tristique.
[toggle tag="h3"]
[tgg_item title="..."] ... [/tgg_item]
[tgg_item title="..." tag="h2"] ... [/tgg_item]
[tgg_item title="..." active="yes"] ... [/tgg_item]
[tgg_item title="..." tag="h6"] ... [/tgg_item]
[/toggle]