Creating an accordion layout with Gutenberg for your WordPress website: Step by Step Guide (2022)

Last Updated on June 27, 2022

Want to give readers detailed information in a clear and coherent way? Learn more about what an accordion layout is, how it works, and how it can be used to improve user experience.

What is an accordion?

It is a stacked list of headings that reveal more details (or hide them) upon a tap or click. It’s a neat and compact way to create organized, detailed content. This gives website visitors more control over what content they may consume by having the capability to expand or minimize it. This ultimately improves user experience because giving people control is #3 on the list of the top heuristics for usable design.

It is perfect to use accordions for FAQ’s, questionnaires, sectioned content, schedules, and for when you want to share detailed information. You can provide all the important information without worrying about overwhelming your readers. When used correctly, the accordion layout can drastically reduce the length of your pages, which minimizes scrolling on your website and improves your website’s load speed.

One benefit of using an accordion layout includes saving space. Using an accordion reduces the length of your page significantly and the need for scrolling too much. Instead of making your page too lengthy, you get to minimize your content and improve readability.

It’s also helpful for better organization of content. By using an accordion layout, you give your readers a summary of what information is on the page. It’s also a better alternative for same-page-links because it helps keep the focus of your website audience on the key pieces of content in the same page. 

Best Practices

If you want to use an accordion layout to present information on your website, there are certain practices to take into consideration so as not to overuse it. 

• Make sure that you only put the non-critical information inside an accordion
• Close accordions by default
• Use an icon/button to let people know that it’s interactive
• Do not use an accordion layout more than once in one page

In this post, we’re going to cover how to add an accordion block in WordPress.

We’ll then show you how to use the accordion block feature included with Stackable to create a professional accordion layout.

How to Add an Accordion to Your WordPress Website

The native WordPress blocks available will not be able to help you create a proper accordion layout, unless you know how to shortcode, OR you could install plugins that simplify adding accordions to your website.

Stackable is a WordPress plugin that makes it easy to create any website by extending the WordPress block editor. We offer you advanced customizations and additional custom blocks like the Accordion block which will help you create an accordion layout for your content with just a few clicks!

The Accordion is very flexible, and intuitive. It’s mobile and tablet-friendly because it’s responsive, which means that it adjusts to different viewports without destructing your design. In addition to that, the Accordion block is highly customizable. There are even pre-made layouts that you can start with:

You can customize the typography of the content inside your accordion to match the design of your website. Not only that, you may also choose from a vast library of icons to your preferred symbol.

The best part? It’s free! But before anything, you will have to install Stackable into your WordPress website. You can do this by downloading the plugin from your WordPress dashboard:

• Once you’re in logged into WordPress, click Plugins > Add New from the left panel
• Search for “Stackable”
• Click the Install Now button, then click Activate

Once you have Stackable installed and activated into your WordPress website, you can finally start using an accordion for your content. Follow these simple steps to use the 

1. Open or create a new page or post.

2. From the toolbar, click on the Inserter (the blue + button)

3. Type in Accordion and it should appear in the menu. Click the icon and it should be added to your page.

4. Select your preferred layout. Don’t worry, you can always go back to the layout picker to change in case you change your mind!

5. Click on the placeholder text to delete it and add in your content!

The inside of the accordion acts like a container so you can add any block you want to, like an image, a video pop up, icons, or basically just about anything else!

To add more accordions, you can go to the Navigation Panel at the bottom of the Inspector, select the whole Accordion block. Then, click the three dots to view the options and click Duplicate. By doing this, you get to create a new accordion that inherits the style of the first one. Just replace the content with the new information, and you’re set!

Further Customizing the Accordion

You will see all the design settings in the Inspector. Just select the element that you want to further customize and open the Inspector by clicking the gear icon on the toolbar. 

What makes the Accordion block flexible are its settings. With the whole accordion selected, navigate to the Style tab of the inspector, and you will see two toggle options:

Every accordion block you add will be closed by default. By toggling on the Open at the start option, it will prompt the accordion to be opened once the page loads.

The second option, on the other hand, is very helpful when you have multiple accordions in your web page. If this is turned on, each time you open a new accordion, it will cause adjacent accordions to close.

Here’s a look at how that works:

Start Creating Accordion Layouts With Stackable Now

Just to recap–using accordions is one way to shorten your content without sacrificing readability. Download Stackable now so you can easily create accordion layouts to keep your content organized!