UNCG Web Assets | Blocks | Accordion

Accordion

An accordion on a website is best used for organizing and presenting information in a compact and easily navigable way, particularly for FAQs or long content sections.

Changelog Update: As of Friday, August 4, you now have the option to add the Media & Text block inside an accordion.

Inside an accordion, you can add as much text as you need and the nice thing is no matter how long the content is, the user is able to open or close the accordion saving space on your page.

With the accordion settings, you can start off with the first one being open when the page loads, or you can have them all closed at the start.

Also, you have the option to allow the user to have only one accordion open at a time, which is the default behavior, or if you feel that there is related information in multiple accordions, you can turn that off and allow the user to have as many accordions open as possible.

An accordion works just like any other paragraph block in WordPress. You have the ability to easily bold text, make text italic, or even add a link inside.

Accordion settings:

Screenshot of Accordion settings.
Screenshot of an individual Accordion section settings

Overall Settings

  • First accordion section is visible
    • This is a nice option if you’re just now starting to use Accordions on a page. It ensures that users see that it’s an accordion element and that it’s easy to open and close them.
  • Allow only one section to be visible at a time
    • If you want people to be able to open all the accordions on a page, turn this off. If you have important-related information on two different accordions, we recommend turning this off.

Accordion Section Settings

  • Each Accordion section or panel can be set up with an anchored link of your choosing.
    • Once set, the link can be copied and used on other pages to link and open the corresponding accordion section while scrolling to it.
Blocks