Create Responsive Accordion Dropdowns In Gutenberg – Accordion Blocks

A simple-to-use accordion block that makes it easier to create an unlimited number of responsive accordion dropdowns in the Gutenberg editor.

More features:

  • Allows you to set the initial accordion item that will be opened on page load.
  • Allows you to determine whether to close the accordion item when opening another item.
  • Automatically scrolls the WordPress page to opened accordion item.

How to use it:

1. Download the Accordion Blocks from the official plugin directory.

2. Upload, install, and activate the plugin on the WordPress.

3. Create a new accordion block in the Gutenberg editor.

New Accordion Blocks

4. Insert accordion title & accordion content into the block.

Accordion Blocks Title Content

5. Customize the accordion by overring the default options from the right panel. All possible options:

  • Open By Default: This accordion item will be closed when the page loads.
  • Click to Close: When open, this accordion item title can be clicked again to close it.
  • Auto Close: This accordion item will close when opening another item.
  • Scroll to Accordion Item: The page will not scroll when opening accordion items.
  • Scoll Pixel Offset: A pixel offset for the final scroll position.

Accordion Blocks Options

6. Override the default appearance of the accordion using the following CSS classes:

.c-accordion__item {
/* The accordion item container */
} {
/* is-open is added to open accordion items */
} {
/* is-read is added to accordion items that have been opened at least once */

.c-accordion__title {
/* An accordion item title */

.c-accordion__title--button {
/* An accordion item title that is using a `<button>` tag */

.c-accordion__title:hover {
/* To modify the style when hovering over an accordion item title */

.c-accordion__title:focus {
/* To modify the style when an accordion item title currently has broswer focus */

.c-accordion__content {
/* An accordion item content container */

Download WordPress Plugin:

You can download this free WordPress plugin using the download button below. Unless otherwise stated, the WordPress plugin is available under GNU General Public License.

Author: Phil Buchanan


Don’t forget to share this WordPress plugin and also check out other awesome plugins on our site.

Rate This Plugin
User Review
0 (0 votes)

See Also:


One Response

  1. Shan Gupta October 9, 2020

Leave a Reply