In the Spotlight: Advanced Accordions

This week we spotlight Accordions, which can now be easily added to your site with the PublishPress Blocks plugin. Those of you who have worked on the OpenLab a while know that we advocate keeping content on a single page brief. It is always easier for the reader to digest information in smaller chunks, and pages or posts that are text heavy can be visually overwhelming. Accordions are a great way to keep a page/ post short, while still making available additional information that might be useful to your reader. 

But, first, you might be wondering: what are accordions? And how can I create them?

Accordions are collapsible lists: the header for each item on the list is always displayed, but the text and multimedia below the header can be opened and closed. For example, in the image below, the Experiential Art & Design club features an FAQ accordion at the bottom of their home page. Each accordion item takes the form of one FAQ, such as “Do I need to bring a laptop?” When you click the question, the accordion expands, and the answer becomes visible. This is a great way for the club to save space; it also invites the reader to interact with their site!

To create an accordion of this kind, first activate the  PublishPress Blocks plugin in your Dashboard. Then, in your page/ post editor, select the Advanced Accordion block. You now have a fully customizable accordion! The block settings that appear on your right allow you to do things like change the icon of the accordion, the color of the header, the size of the font, etc. Note that beneath each header you can include images as well as text.

We encourage you to play around with Advanced Accordions. While you probably won’t want to hide crucial information in an accordion (e.g. an assignment prompt), they can be a great space-saving design tool for information that might be thought of as “additional” or “further reading.” 

Do you already use accordions on your site? What are some of your use-cases?