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 */
}

.c-accordion__item.is-open {
/* is-open is added to open accordion items */
}

.c-accordion__item.is-read {
/* 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

Homepage: https://wordpress.org/plugins/accordion-blocks/

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

Rate This Plugin
Sending
User Review
0 (0 votes)
Tags:

Leave a Reply