Accordion

An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be ‘collapsed’ with just a short label visible or ‘expanded’ to show the full content.

  • Heading 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam adipisci sequi a rerum molestiae recusandae aliquam velit voluptatum perspiciatis quo, eos nihil porro eum nisi nesciunt ullam minus quasi explicabo. Provident id sequi corporis nesciunt harum dignissimos, iure officiis dicta. Maiores possimus totam pariatur ullam neque voluptatum. Officiis, esse! Nobis ab unde saepe culpa quae, voluptatum fuga iure aut tenetur.

  • Heading 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam adipisci sequi a rerum molestiae recusandae aliquam velit voluptatum perspiciatis quo, eos nihil porro eum nisi nesciunt ullam minus quasi explicabo. Provident id sequi corporis nesciunt harum dignissimos, iure officiis dicta. Maiores possimus totam pariatur ullam neque voluptatum. Officiis, esse! Nobis ab unde saepe culpa quae, voluptatum fuga iure aut tenetur.

  • Heading 3

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam adipisci sequi a rerum molestiae recusandae aliquam velit voluptatum perspiciatis quo, eos nihil porro eum nisi nesciunt ullam minus quasi explicabo. Provident id sequi corporis nesciunt harum dignissimos, iure officiis dicta. Maiores possimus totam pariatur ullam neque voluptatum. Officiis, esse! Nobis ab unde saepe culpa quae, voluptatum fuga iure aut tenetur.

Accordion Column Right

This is an example layout of Accordion where a content editor can add a content (media, text) on the left, and accordion component on the right.

  • Heading 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam adipisci sequi a rerum molestiae recusandae aliquam velit voluptatum perspiciatis quo, eos nihil porro eum nisi nesciunt ullam minus quasi explicabo. Provident id sequi corporis nesciunt harum dignissimos, iure officiis dicta. Maiores possimus totam pariatur ullam neque voluptatum. Officiis, esse! Nobis ab unde saepe culpa quae, voluptatum fuga iure aut tenetur.

  • Heading 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam adipisci sequi a rerum molestiae recusandae aliquam velit voluptatum perspiciatis quo, eos nihil porro eum nisi nesciunt ullam minus quasi explicabo. Provident id sequi corporis nesciunt harum dignissimos, iure officiis dicta. Maiores possimus totam pariatur ullam neque voluptatum. Officiis, esse! Nobis ab unde saepe culpa quae, voluptatum fuga iure aut tenetur.

  • Heading 3

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam adipisci sequi a rerum molestiae recusandae aliquam velit voluptatum perspiciatis quo, eos nihil porro eum nisi nesciunt ullam minus quasi explicabo. Provident id sequi corporis nesciunt harum dignissimos, iure officiis dicta. Maiores possimus totam pariatur ullam neque voluptatum. Officiis, esse! Nobis ab unde saepe culpa quae, voluptatum fuga iure aut tenetur.

Accordion Column Left

This is an example layout of Accordion where a content editor can add a content (media, text) on the right, and accordion component on the left.

  • Heading 1

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam adipisci sequi a rerum molestiae recusandae aliquam velit voluptatum perspiciatis quo, eos nihil porro eum nisi nesciunt ullam minus quasi explicabo. Provident id sequi corporis nesciunt harum dignissimos, iure officiis dicta. Maiores possimus totam pariatur ullam neque voluptatum. Officiis, esse! Nobis ab unde saepe culpa quae, voluptatum fuga iure aut tenetur.

  • Heading 2

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam adipisci sequi a rerum molestiae recusandae aliquam velit voluptatum perspiciatis quo, eos nihil porro eum nisi nesciunt ullam minus quasi explicabo. Provident id sequi corporis nesciunt harum dignissimos, iure officiis dicta. Maiores possimus totam pariatur ullam neque voluptatum. Officiis, esse! Nobis ab unde saepe culpa quae, voluptatum fuga iure aut tenetur.

  • Heading 3

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam adipisci sequi a rerum molestiae recusandae aliquam velit voluptatum perspiciatis quo, eos nihil porro eum nisi nesciunt ullam minus quasi explicabo. Provident id sequi corporis nesciunt harum dignissimos, iure officiis dicta. Maiores possimus totam pariatur ullam neque voluptatum. Officiis, esse! Nobis ab unde saepe culpa quae, voluptatum fuga iure aut tenetur.