Advanced Accordion Block

You can create an Advanced Accordion block when you need to display a lot of content in a small area. Your site visitors will be able to click on accordion bars that slide out to reveal content.

Video guide to Accordion blocks

How to create the Advanced Accordion block

You can create an Advanced Accordion block by clicking the Advanced Accordion button in the PublishPress Blocks category. When you first create this block, you will see 2 accordion elements that display by default.

Screen Shot 2020 12 10 At 11.39.29
Screen Shot 2020 12 10 At 11.39.57

Settings for the Advanced Accordion block

Once created, you can adjust the header, body or border options from the right sidebar.

  • Accordion Settings:
    • Bottom spacing: Define the space between each accordion (this will only show on the frontend).
    • Initial Collapsed: Make all accordions collapsed by default.
  • Header Settings
    • Header Icon Style
    • Color Settings: Background Color, Text Color and Icon Color

Border settings for the Advanced Accordion block

The Advanced Accordion block also allows you to customize the borders of the accordion areas:

  • Body Color Settings
    • Background Color
    • Text Color
  • Border Settings
    • Border Style: solid, dashed or dotted
    • Color Settings
    • Border width, radius

Anchor support (Pro)

You can add custom anchors to the accordions, and open an accordion through a URL.

PublishPress Blocks - Advanced Accordion block, anchor support
  1. Add the anchor through Advanced > HTML anchor
  2. In frontend, open the post/page link by attaching the custom anchor. As example:

Important: the anchor must be a unique id.

Default settings for all your Advanced Accordion blocks

You can set default options for every Advanced Accordion block added to your site. This is possible with the Default Blocks Config feature and it allows you to create a consistent look-and-feel for all your accordions.

  • Go to PublishPress Blocks in your WordPress admin menu.
  • Click Configuration, then Default Blocks Config.
  • Click Advanced Accordion.
Screen Shot 2020 12 10 At 11.40.43

Professional publishing plugins for WordPress! Get PublishPress