Accordion

The Accordion content type will allow you to organize text and images inside of expandable, labeled accordions. It’s especially useful for making long blocks of text more scannable.

Accordion

To add Accordions to your page, first add a new row to your page by clicking Add Row at the bottom of the page building area, or by clicking the plus sign between rows when hovering over already created content.

In your block, choose the radio button for Content and choose “Accordion” from the Content Select dropdown.

Add Accordion

You will then see the optional Accordion Heading field, that allows you to add a heading above your accordion and the Add Accordion Item button. Pressing the button will open your first accordion interface. There you’ll have a field to enter the Accordion Title and a traditional WordPress text box for the content.

Accordion with title

Continue to add as many accordions as you need. You’ll be able to reorder the accordions by grabbing the left side of the accordion interface near the numbers and dragging and dropping them. You can also add new accordions between them by clicking the plus sign or delete accordions by clicking the minus sign.

reorder accordions

Once your content editing is complete, save by clicking Publish or Save Draft in the right WordPress menu. If you are making a change to already published content, click Update in the right WordPress menu and your changes will appear live on the page.

Linking Accordions

You now have the ability to link directly to open accordions, this will help you drive users to more specific information on your site. To get this link go to the page with your accordion and open it, you’ll see a gold icon that you can click to copy the URL. Anyone not logged in will not see this icon.

This link is now copied to your clipboard and you can add it to an email to a user or as a link from another page. It will look something like this: https://rlh.wfu.edu/fall-2020-residential-life/fall-2020-faqs#panel-0-3 with the dynamic accordion name added to the end of your page link. Once a user clicks on the link it will take them to the page, down to the specific accordion open, ready to read.