Accordions

Owned by Musa Jatkowski
Last updated: Apr 20, 2022 by Chandler Warren
2 min read

If you find that a page or post has too much information and requires a lot of scrolling, you can fix this by using collapsible accordions within the Page Builder editor.

Visual Editor Accordions

  1. Create a new Visual Editor widget in Page Builder for each item in the accordion.

  2. For each Visual Editor widget, enable Accordion by selecting the checkbox at the bottom.

    accordion widget

  3. Add the title and content.

The title of the visual editor will become the accordion header, and clicking on the title will expand the item's content. Thus, 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 clicking on one item’s titles will expand its content while collapsing all other items.

Post Loop Accordions

You can also create accordions using the Post Loop widget. Doing so will create a group containing an accordion for every post that matches the loop settings.

  1. When using the Page Builder editor, begin by adding a Post Loop widget.

  2. Enter a title for the accordion section and ensure that the Template is set to content-accordion.php from the dropdown menu.

  3. template dropbown

    Establish the parameters for the post loop by selecting the type of post you wish to display, along with how you’d like those posts to be ordered. If you have many posts, you might consider using the Posts per Page field to limit the amount of posts that get displayed.

  4. Visit the published page to view the accordions, editing the loop settings if needed.

You can also add these accordions to a sidebar. To do so, navigate to the Appearance → Widgets screen in your dashboard, add a Post Loop widget to the sidebar of your choice, and then follow the instructions above.

Related Articles

Â