How does the accordion block work?

Hi, this is Sandra from GREYD. Today I’d like to show you how to build modules that can be opened and closed fast and easily with our accordion block.

At first, place the accordion block anywhere on your page. With the plus symbol you can then add as many sections as you like. You can edit the title as usual with the Block Editor and also use the Block Editor to add and edit the content to be shown within the individual sections.

On the right you will then find several settings for your entire accordion. For example, you can change the icon and also have different icons for the active — so the open — or the normal — the closed — state. This option here makes sure that only one section can be opened in the frontend, which means that as soon as a different section is clicked the other one will be closed automatically. And you can also have the first section pre-opened when the page is loaded.

Let’s move on with some design settings for the title and content sections of your accordion. For the title you can for example edit the text and background color and define different looks for the normal and active state and even create a hover state for both of them. Also, you can edit the border radius, spaces and font size. Some settings even offer different options for different screen sizes.

The same goes for the content sections. Here you can edit the text and background color as well as the padding and space below the section individually per breakpoint.

For more videos and information please visit our Helpcenter.