How do I Use an Accordion Block?

You can use an accordion block by following a few easy steps. You may know that an accordion block is a very helpful tool when used correctly. This block can enable you to include a lot of information on one page while keeping it from becoming overwhelming. This block really comes into full bloom on pages like an FAQ or Ministry Page with short descriptions/answers.

Here is how to use an accordion block:

  1. Once you are logged into the site, go to the Page/Post you wish to edit or create a new one
  2. Next you will want make sure your Page/Post has a title
  3. You can then add a Accordion block one of a couple different ways
    1. Typing “/accordion” in a new blank Paragraph block
    2. Click one of the couple Add Block buttons either the Blue one in the Top Left corner or the Black one at the right of the block
  4. After the Block has been added, click the Edit Pencil in the Block Toolbar
  5. You will now see an Accordion Row, you will want it expanded
    Note: It may be expanded or collapsed, you can click on it to invert it.
  6. Add the Section Title. The Section Title is what the title of the Accordion will be. This is always displayed.
  7. Add the Section Content. This will be hidden or expanded depending on the state of the Accordion. Hidden by default. You can Add Media, change text to headings by clicking the Paragraph dropdown, make links, etc.
  8. You can add more Accordion Sections by clicking the Add Row button
  9. You can rearrange Accordion Sections by clicking on the number to the left of the Accordion Row and dragging it up and down.
  10. You can delete an Accordion Section by clicking the Remove button on the right side of the Accordion Row
  11. You can collapse or expand the section by clicking where it is says Accordion Row
  12. Once you have added some content for a section or two, it will look a little something like this
  13. Next click the Publish or Update button in the top-right of the Page/Post
  14. When viewing the Accordion on the frontend, and click the first accordion, it will look something like (depending on your site’s design, of course)

– by Cody Armock