Breadcrumb

Accordions Custom Block

Accordions are available as custom blocks. Accordions are expanders and will open to show additional content. A great use for accordions is for a list of Frequently Asked Questions. Accordions prevent pages from getting too lengthy by dividing long sections of information. Instead of scrolling through all the content, viewers can click to open a specific section of information. 

Each accordion has a title; the part that is clicked for expansion. The part that expands allows for a full editing toolbar. This means that any sort of information you can add to body content of a page, such as an image or embed code, can also be displayed in the expanding section of an accordion. 

accordion example screenshot
Accordion Example with three expanders, the first open

Things to Note 

  • There is one style for accordions, as shown in the screenshot above. 
  • Accordion option available: "Allow Multiple Accordion Items Open". This will enable multiple to be open at once, otherwise, only one will be open at a time.
  • Accordion option available: "Allow All Accordion Items to be Closed". If this is selected, then all accordions can be closed, otherwise, the last one clicked will remain open. 
  • One accordion can be open by default with a check box in the proper accordion item. 

How to Create an Accordion

Editors and Site builders are able to create Accordions. It is an option in the Custom Block Library. They can also be created using the Panelizer. Once an Accordion has been created, it will be added to the custom block library. 

Method 1 - Custom Block Library

  1. On the admin panel, navigate to Structure -> Block Layout -> Custom Block Library
  2. Click the "Add custom block" button 
  3. Select "Accordions" from the list
  4. Give your Accordion a unique custom block name
  5. In the "Introduction" tab, optionally add any content you want to display above the accordion. 
  6. In the "Accordion Info" tab, select if you want visitors to have multiple accordion items open at once and if you want visitors to be able to close all accordion items. 
  7. Accordion Title is the part that will clickable to expand for more information. Accordion Body will display once the accordion has been clicked by the visitor. 
  8. Check the box "Open by Default" on one accordion that you want to be open by default. This is optional. 
  9. Click "Add Accordion" to add additional accordions.
  10. To remove accordions, click on "Remove" next to the accordion item that needs to be removed.
  11. Hold down the arrow crosshair to move accordion items in the proper order. 
  12. By default, the block is in draft and will not display to those viewing the site, only to authenticated (logged in) users. Once you are ready for the updates to publish, change the state to "Published". 
  13. Click Save