Sometimes, you may find that a page or post has too much information and requires a lot of scrolling as a result. One way to fix this is by using collapsible accordions. You will need to use the Page Builder editor.

Creating Accordions

In Page Builder, create one new Visual Editor widget for each item in the accordion. In each Visual Editor widget, check the Accordion checkbox at the bottom, so that it is enabled.

Then, add the title and content. Note that the title of the visual editor becomes the accordion header, and clicking on the title will expand the item's content. So, each Visual Editor with Accordion enabled must contain a title in the Title field.

If you stack multiple Visual Editors with Accordion enabled on top of each other (in the same column), they will be grouped together and as a result, clicking on one item’s title will expand its content while collapsing all other items.

Styling Accordions

Accordions are easily to style using your site's Custom CSS. We have also put together a guide with several pre-made accordion styles along with CSS that you can copy and paste onto your own website.