Getwid Blocks: Accordion Gutenberg Block
Table of Contents
The Accordion Gutenberg WordPress block by Getwid adds snap horizontal accordions, in which, among other options, you can customize icons and heading types. One of the key benefits of this Accordion Gutenberg block is that it’s a nested block that can handle multiple content types – that means you can add any block inside the accordion tab container.
Accordion is a perfect design method for reducing scrolling and categorizing information, thus, improving the overall user experience on your WordPress website.
Purpose of the Accordion Gutenberg Block
The block will be extremely helpful in the following cases:
- Highlight important details of any content section
- Make complex information easily accessible
- Create effective FAQ website sections.
Features of the Accordion Gutenberg Block
By default, Getwid will style your accordion the way your active WordPress theme looks (that includes font size and color, for example).
To customize visual and interaction design aspects of the Accordion Gutenberg block, you are supplied with the following key block settings:
- Select a wide or full-width layout for the entire accordion.
- Choose a default and an active icon for tabs.
- Specify the icon position.
- Select a heading size.
- Choose a tab (you need to add all of them in advance), which will be active (opened) by default.
- Add any type of content into the accordion tabs (videos, images, tables, etc.) using any WordPress block:
- Add classes if you want to create a more tailored look.
Design Tips
- You can transform Accordion into tabs or toggles using the “Transform” option in Gutenberg.
Download Free Gutenberg Theme for Getwid
Such a simple block will help you improve the readability and visual presentation of any content. There are also a few pre-designed blocks for this purpose, as well as other useful blocks, packed with the Getwid Base Starter theme, which you can start using today. This theme was from scratch created for Gutenberg, so be sure it’ll be a solid foothold for the new era in WordPress!
Use these links to download the theme and the plugin:
Check out Getwid Demo
Download Getwid Gutenberg Blocks Free
Install Getwid Base Starter Theme for Gutenberg
Hi! Great product!
I have a suggestion:
Similar to anchor reference #item, the possibility of call by url a specific accordion or tab item, and show the item expanded (accordion) or select the tab. Now, i’m not using accordion for FAQs because i can’t link a specific answer.
Best regards,
Thanks for your feedback. We have this request in a list of features. We will notify you when we have any news.
how would I overwrite the default css styles in blocks.style.css
I would like to remove the borders and style the color of the font and icons
You can use Getwid Style Kit https://github.com/motopress/getwid-style-kit
Hi, love your stuff and it has made a huge impact in my site design. On the accordion, is there some CSS or a mode that would prevent large upward scroll from happening?
If an open item is taller than the screen and then you open the next item when you get to the bottom, the new top scrolls past the top of the screen requiring the user to scroll up. Is there a way to make the toggle event behave as if it had followed a link to #newly_opened_item ?
Hi Andrew, Thank you for using Getwid and for your question. Unfortunately, there is no possibility to add such an auto-scroll to the Accordion block. Thank you for your suggestion though. We will keep it in mind for further plugin development.
We are having good success with Getwid so far, so we are happy.
I have a question about the accordion, and I was wondering how to make all the items in the accordion collapsed by default on page load. It appears that the first item in the accordion is always open by default, perhaps I missed something?
Hi, When you choose Active by default – None then all accordion items should be collapsed.
Hello,
Is there any way to include heading, paragraphs & lists inside the acoordion item content?
Thanks
Hi Antonis, Thanks for your feedback. We have this feature in our to do list. We’ll notify you if we have any news.
Thanks !
Hi, Antonis!
I am delighted to let you know, that yesterday, on June 25th, we have released the new Getwid update – v. 1.6.0! The ability to add any content into the Tabs, Accordion and Toggle blocks has been also included 😉 I hope you will enjoy this new feature you have requested.
It would be also appreciated if you leave your positive feedback about Getwid at: https://motopress.com/products/getwid/#reviews.
LOVE luv Love MotoPress for delivering these amazing Getwid block features. Koolio!