Skip to main content

Accordions

Accordians - No Background Section

Heading Level 3

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pellentesque ornare nibh. Maecenas dui metus, accumsan a consectetur at, gravida id orci. Sed viverra nisl in viverra accumsan. Quisque fringilla, leo quis gravida bibendum, lacus tortor feugiat lacus, vitae tempus erat enim id diam. Phasellus vel sapien ut purus malesuada ullamcorper. Vivamus congue posuere ligula, sed congue nisi vestibulum non. Nam id pharetra odio. Curabitur arcu neque, mattis et est vel, elementum vulputate mi. Phasellus interdum sapien a sagittis elementum. Maecenas dignissim sit amet lectus et venenatis.

Cactus

Coffee is great!

SSU Employees and their pets
NamePet NameType of Animal
JohnRover Hedgehog
JaneDame Agatha Whisperlantern upon AvonSkink

Accordion - Dark Section

Heading Level 3

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pellentesque ornare nibh. Maecenas dui metus, accumsan a consectetur at, gravida id orci. Sed viverra nisl in viverra accumsan. Quisque fringilla, leo quis gravida bibendum, lacus tortor feugiat lacus, vitae tempus erat enim id diam. Phasellus vel sapien ut purus malesuada ullamcorper. Vivamus congue posuere ligula, sed congue nisi vestibulum non. Nam id pharetra odio. Curabitur arcu neque, mattis et est vel, elementum vulputate mi. Phasellus interdum sapien a sagittis elementum. Maecenas dignissim sit amet lectus et venenatis.

Cactus

Coffee is great!

SSU Employees and their pets
NamePet NameType of Animal
JohnRover Hedgehog
JaneDame Agatha Whisperlantern upon AvonSkink

Accordion - Light Section

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

How do I...

What is an Accordion?

Accordion is a layout builder block with a navigation bar, which contains the heading and the body, which contains text. When the navigation bar is clicked, the body text will 'open' and appear.

How do I create an Accordion?

  1. In Layout Builder, add a block.
  2. A tray slides in from the right displaying options, select Accordion
  3. Add the Title (Display title optional, uncheck to hide title)
  4. Accordion Type 

    Screenshot of Accordion block in drupal.
    • Collapse closes an open accordion item when another item is opened.
    • Open makes accordion items stay open when another item is opened.
  5. Accordion items Heading
    • Select the HTML tag for the heading
       

      Dropdown Heading
  6. Add an Accordion Item
    • Add Heading
    • Add Body
  7. If you want another Accordion item select Add Accordion Items
     

    Add Accordion Item button and Add Block button
  8. Select Add Block