Advanced Accordion Gutenberg Block

Description

Advanced Accordion Gutenberg Block is a custom native Gutenberg Block that allows you to build a FAQs Section or Accordion easily on your site post and page using Gutenberg Editor.

Video Overview

🔗 USEFUL LINKS

Key Features

  • 1. Custom Minimal Design: Experience a sleek, modern interface designed to enhance user engagement with a clean and minimalistic look.

  • 2. Super Fast: Lightweight, and Optimized: Ensure quick loading times and smooth performance with a highly optimized, lightweight build.

  • 3. Linked Accordion: Seamlessly connect accordion items for interconnected content, providing a streamlined user experience.

  • 4. Built with Gutenberg Native Components: Enjoy full integration with Gutenberg, ensuring compatibility and ease of use with WordPress’s native block editor.

  • 5. Unlimited Nested Accordion: Create complex, multi-level accordions effortlessly, allowing for detailed and organized content structures.

  • 6. Unlimited Styling Options: Customize your accordion with extensive styling options, including margin, padding, border radius, color, background, and tag selection.

  • 7. Highly Customizable: Benefit from extensive customization possibilities, offering flexibility to suit any design requirement.

  • 8. All Content Types Supported: Insert any type of content, including text, images, videos, and more, within the accordion body for versatility.

  • 9. Custom Color Palette: Personalize your accordion’s appearance by selecting from a customizable color palette, aligning with your brand’s aesthetics.

  • 10. Active Accordion on Page Load: Automatically expand the desired section when the page loads, ensuring immediate visibility of important content.

  • 11. Responsive and SEO Friendly: Maintain a seamless user experience across devices with a responsive design, while also optimizing your content for search engines.

  • 12. Unlimited FAQs: Create and manage as many FAQs as needed, ensuring all user queries are addressed comprehensively.

  • 13. Infinite Reusable: Reuse accordion items across different pages, making content management more efficient and consistent.

PRO Features

  • 1. Instant Search: Enable a search bar to help users find specific FAQs quickly. It’s useful when you have a long list of FAQs.

  • 2. QA (Question and Answer) Style: Display FAQs in a structured question-and-answer format for easy readability and user engagement.

  • 3. Voting Feedback: Add feedback voting buttons to each FAQ item. From the total vote count, you can understand how helpful an accordion is.

  • 4. Anchor Link: Generate unique links for each FAQ item. It’s handy for directing users to specific FAQs from external sources or within the same page.

  • 5. Open All / Close All: A functionality that lets users expand or collapse all accordion items simultaneously. It provides convenience, especially when users want to view or hide all FAQ items at once.

  • 6. Read More button: Expand the accordion content beyond a certain character limit or line count, displaying a «Read More» button or link to reveal the entire content.

  • 7. Activator Event: Choose the event type to activate the accordion. You can choose from Click and Hover.

  • 8. Steps Layout: Sequentially open accordions, marking previously opened ones as checked, guiding users through a step-by-step process.

  • 9. Checklist Layout: Convert accordions into a checklist format, allowing users to tick off completed items, ensuring thorough task management.

Creating an Accordion FAQ with Advanced Accordion

Screenshots

Blocks

This plugin provides 3 blocks.

  • Separate Accordion Build Accordion and FAQs Easily.
  • Group Accordion Build Accordion and FAQs Easily.
  • Single Accordion Single Accordion for Group Accordion

Installation

It’s really easy and super simple to install Quick Edit plugin.

Automatic Installation

  1. Go to Plugins > Add New screen in WordPress.
  2. Search for Advanced Accordion Block.
  3. Install and activate the plugin, that’s it.

Manual Installation

  1. Download Advanced Accordion Block.
  2. Extract the advanced-accordion-block.zip file. You’ll get plugin files inside Advanced Accordion Block directory.
  3. Upload the plugin files to the /wp-content/plugins/advanced-accordion-block directory.
  4. Activate the plugin through the ‘Plugins’ screen in WordPress.

FAQ

have you used any framework to develop this?

No. It has been developed with 100% Gutenberg Native components. No Framework at all.

is it responsive?

Definitely, it is responsive.

Can I use it with any theme?

Yes, you can use it with any theme.

Will it slow down my site?

Never, it is light-weight and never slow down your site. In addition, it only loads scripts on the pages where the block is used.

Is it built with Gutenberg Native Components?

Yes, it is built with 100% Gutenberg Native Components.

Reviews

27 de septiembre de 2024 1 reply
Hello, is it possible to make accordion inside accordion ? Now if I add two accordion blocks inside each other and try to open one which is inside – the upper accordion closes itself. 🙁
24 de julio de 2024 1 reply
After installing the plugin, it’s impossible to apply a title style to Gutenberg’s default title block (pro mention displayed on top). Yet this has nothing to do with the accordion plugin. I don’t recommend it.
7 de mayo de 2024
The plugin works very fine, but it generates an error when you activate it, please fix it. However it’s activated anyway
10 de abril de 2024
The plugin is well designed and the developers helped me with an issue immediately. I also submitted a couple feature requests and the Spider Themes team was very responsive.
4 de abril de 2024
an issue I can see when comparing our staging- to our production-site. version 4.6.0 still works wonderfully, but with the version 4.6.4 update accordion icons will not maintain the arrow-down-up option that I’ve selected and just pops back to the plus/minus option after 1-2 seconds. A little annoying, but not a huge issue 🙂 otherwise, good stuff!
Read all 23 reviews

Contributors & Developers

“Advanced Accordion Gutenberg Block” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

4.7.2 (09 September 2024)

Fixed: Hard to click on separate accordion content section
Fixed: The separate accordion icon was not centered
Updated: Freemius SDK to 2.7.4

4.7.1 (02 August 2024)

Fixed: PRO notice issue resolved (The issue was occurred on editor style tab where any block is used)
Fixed: Group accordion active style issue fixed
Updated: Freemius SDK to 2.7.3

4.7.0 (05 June 2024)

New: Added FAQ schema option. Now, you’re able to turn on FAQ schema for your accordion
New: Accordion headings keyboard-navigable
New: Added Question & Answer style layout
Fixed: Resolve Accordion focus issue
Fixed: Resolve icon change & position option
Updated: Freemius SDK to 2.7.2
Tweaked: Style & Script loaded conditionally
Tweaked: Move the styling fields to Styles tab

4.6.0 (23 November 2023)

Updated: Freemius SDK to 2.6.1
Tweaked: Removed some unnecessary links

4.6.0

  • Changed the plugin ownership to spider-themes
  • Plugin’s page moved under the WordPress Settings page from Tools page
  • Plugin’s welcome page design changed/improved

4.5.0

  • Adding new Group Accordion block
  • Adding animation
  • Fixing minor issues

4.0.0

  • Click event issue fixing
  • Id for accordion
  • Linked Accordion feature
  • Disable Accordion feature
  • Block Patterns added

3.0.0

  • A Major updates with a lot of changes
  • Remoe jQuery dependency
  • Fix Border Complicity
  • More Icons and Icons separate styling
  • Border Radius
  • Active Accordion on Page Load
  • Custom Margin & Padding Options

2.0.0

  • A Major updates with a lot of changes
  • Nested Accordion
  • Accordion Container Border
  • Accordion head & body color & background

1.0.2

  • Supports all blocks for building accordion content
  • Icon issue fixing
  • Compatibility check with latest WP version

1.0.0

  • Initially released this version.