Accordion Blocks: a comparison

Accordions are a simple way to compress a lot of content in a small space, not to dissimilar to tabs, which I already wrote a post on a while back.

Within the block sets I have reviewed there are several “Accordion” blocks, I will be comparing a few of them here today:

Accordion block by Atomic Blocks

Atomic Blocks – Gutenberg Blocks Collection

---

This is by far the simplest one, but also the easiest one to use. Its settings could not be simpler: Title Size and wether the accordion is opened or not by default.

This is what the block looks like in action:

---

This first block is very simple but has the big advantage to be the only one which works well in AMP:

---

Accordion block by Advanced Gutenberg.

Advanced Gutenberg – Blocks, Permissions, Layouts, Forms and CSS Styles

---

This block has a few more settings that the first one, most of them to change the colors & design of the tabs:

This is what the block looks like in action:

---

Accordion block by Kadence Blocks

Kadence Blocks – Gutenberg Page Builder Toolkit

Out of the 3 plugins reviewed so far this is the most complex one and the one for most room for customization. It also works slightly different in the sense that uses 2 containers (accordion and panels ) instead of just one (panels).

In this case the plugin offers different blocks settings for the accordion container, with LOTS of options. This is the only block of the three in which you can control the design globally and coordinate the tabs so that when one opens the other ones will close.

And then for each of the panels. This panel-specific setting give your the choice to choose from a large number of icons.

• 

• 

This is what the block looks like in action:

Accordion block by Ghost Kit

Powerful Gutenberg Blocks and Templates – Ghost Kit

Ghost Kit’s accordion block has no settings but it allows to add any block inside its accordion blocks.

Accordion block by Stackable

Stackable – Gutenberg Blocks

Stackable’s accordion blocks work separately with very basic settings. Unlike in the case of Ghost Kit, Stackable’s accordion block only allows text inside its accordion blocks.

This is the block in action:

---

Accordion Blocks By Phil Buchanan

Accordion Blocks

This is a good solution if you want a stand-alone accordion block, without having to install a full block suite

This is what the block looks like in action: