J. Duijvelshoff

Simple and good accordion plugin providing 2 blocks: Accordion and Accordion-pane. Drag an Accordion block into your post, page or custom post type and hit the ‘Add pane’ button for as often as you need.
Features:
<ul>
<li>Setting for ‘One at a time’. Only one pane within an accordion can be opened. Uncheck this to allow for all panes to be opened simultaneously.</li>
<li>Use ‘Tab’ key to focus panes and hit ‘Enter’ to open</li>
<li>Extensive Use of Accessability attributes</li>
<li>Optionally choose for HTML and tags. </li>
<li>Panes scroll into view when a previous pane gets closed</li>
<li>Adjust colors, margins and padding in the block editor</li>
<li>Add styling via css, css-vars or theme.json</li>
</ul>
<h3>Use</h3>
Drag an Accordion block into a post or page or CPT and use the ‘Add pane’ button at the bottom of the block to add pane-blocks.
<h3>styling</h3>
At the root some basic styling variables are defined that can be overwritten by your theme. Some of these can be changed ad hoc by the user in de block-editor. These are:
<pre><code> --wp--custom--accordion--transition-time: 0.1s;
 --wp--custom--accordion--margin-top: 0px;
 --wp--custom--accordion--margin-right: 0px;
 --wp--custom--accordion--margin-bottom: 0.1em;
 --wp--custom--accordion--margin-left: 0px;
 --wp--custom--accordion--header-padding-top: 0.5em;
 --wp--custom--accordion--header-padding-right: 2em;
 --wp--custom--accordion--header-padding-bottom: 0.5em;
 --wp--custom--accordion--header-padding-left: 2em;
 --wp--custom--accordion--content-padding-top: 0.5em;
 --wp--custom--accordion--content-padding-right: 2em;
 --wp--custom--accordion--content-padding-bottom: 0.5em;
 --wp--custom--accordion--content-padding-left: 2em;
 --wp--custom--accordion--header--text-color: #ffffff;
 --wp--custom--accordion--header--background-color: #666666;
 --wp--custom--accordion--header--active-text-color: #ffffff;
 --wp--custom--accordion--header--active-background-color: #999999;
 --wp--custom--accordion--body--text-color: #ffffff;
 --wp--custom--accordion--body--background-color: #666666;
</code></pre>
The default values can also be defined in the theme.json of your (child-) theme:
Add them to the theme.json like so:
<pre><code>{
 "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
 "version": 3,
 "settings": {
 "custom": {
 "accordion": {
 "transitionTime": "0.1s",
 "marginTop": "0px",
 "marginRight": "0px",
 "marginBottom": "0.1em",
 "marginLeft": "0px",
 "headerPaddingTop": "1em",
 "headerPaddingRight": "1em",
 "headerPaddingBottom": "1em",
 "headerPaddingLeft": "1em",
 "contentPaddingTop": "0.5em",
 "contentPaddingRight": "2em",
 "contentPaddingBottom": "0.5em",
 "contentPaddingLeft": "2em",
 "headerTextColor": "#ffffff",
 "headerBackgroundColor" : "#666666",
 "activeHeaderTextColor": "#ffffff"
 "activeHeaderBackgroundColor": "#999999",
 "bodyTextColor": "#000000",
 "bodyBackgroundColor" : "#ffffff",
 }
 }
 }
}<h3>Accessability</h3>The pane-headers have a tab-index. If the Enter-key is pressed while a pane-header has focus, a click-event is triggered on that pane-header thereby activating / opening it.
</code></pre>

Good Accordion

Wordpress accordion block. Simple, small and good.

ShapedPlugin LLC

Rubel Miah

Shamim Mia

Md Khalil Uddin

<h4>Responsive WordPress Accordion, FAQ Builder & Product FAQ Plugin</h4>
Easy Accordion is a responsive Accordion and FAQ builder plugin for WordPress. It allows you to create unlimited accordions, FAQ sections, or pages, as well as WooCommerce Product FAQs, using a simple drag & drop interface. The plugin is lightweight, easy to use, and comes with lot of customization options to match your site’s design.
You can add accordions anywhere on your site using the Gutenberg block editor or shortcodes in the classic editor. This makes it simple to organize and display content such as FAQs, product details, service information, or any collapsible content.
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/jQwLyM0Zb3M?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent&listType=playlist&list=PLoUb-7uG-5jPBSfjZalo6KKrc4jniAuix" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<a href="https://easyaccordion.io/easy-accordion-free-demo/" rel="nofollow ugc">Live Demo</a> | <a href="https://docs.shapedplugin.com/docs/easy-accordion/introduction/" rel="nofollow ugc">Documentation</a> | <a href="https://shapedplugin.com/create-new-ticket/" rel="nofollow ugc">Support</a> | <a href="https://easyaccordion.io/pricing/?ref=1" rel="nofollow ugc">Upgrade to Pro!</a>
The Easy Accordion helps you organize answers to your visitors’ most common questions. It allows you to create comprehensive FAQs to improve the visitors browsing experience and reduce support requests.
<h4>Main Features</h4>
Responsive Vertical Accordions 
Create unlimited responsive accordion groups in vertical layouts for FAQs, product details, or content sections.
Multi-level / Nested Accordions 
Easily create nested accordion structures by adding FAQ groups inside another accordion item.
Custom Post Type Support 
Create and manage accordions or FAQs using a dedicated FAQ custom post type, giving you maximum content flexibility with the Gutenberg editor.
Drag & Drop Accordion Builder 
Arrange and organize accordion items instantly with an intuitive drag & drop interface.
Multiple FAQ Sections or Pages 
Display multiple FAQ sections on a single page or across different pages, each with its own unique design and settings.
Accordion Activator Events 
Choose how users or visitors trigger accordion transitions: either by clicking or hovering.
Accordion Display Modes 
Control how your accordion loads: First Open, All Open, or All Collapsed.
Multiple Items Active Together 
Allow multiple accordion panels to remain open simultaneously (toggle mode).
Scroll to Active Item 
Automatically scroll to the expanded accordion item for a smooth user experience.
SEO-Friendly Schema Markup 
Add a structured FAQ schema to improve search engine visibility and provide richer results.
Customizable Toggle Icons 
Show or hide expand/collapse icons, adjust their color, size, and position.
Color and Styling Options 
Easily customize titles, descriptions, colors, borders, spacing, and typography to match your site’s design perfectly.
Import and Export FAQs 
Easily import or export FAQs, with support for multiple file types.
<h4>For Support, Feature Requests, and Bug Reporting</h4>
<blockquote>
Ask us at <a href="https://shapedplugin.com/create-new-ticket/" rel="nofollow ugc">Support</a>
</blockquote>
<h4>Easy Accordion Pro</h4>
<blockquote>
<a href="https://easyaccordion.io/?ref=1" rel="nofollow ugc">Easy Accordion Pro</a> is the premium version of the Easy Accordion plugin, adding additional features and functionality. It includes FAQ analytics, user FAQ submission forms, AJAX search, toggle all button, featured title icons, multiple toggle icon sets, accordion animations, and AJAX load more functionality.
The plugin supports horizontal, vertical, and multi-column layouts, offers extended customization and styling options, and includes 17 pre-designed accordion themes. Learn more about <a href="https://easyaccordion.io/" rel="nofollow ugc">Easy Accordion Features</a>.
</blockquote>
<h4>Multilingual Ready</h4>
<ul>
<li><a href="https://wpml.org/" rel="nofollow ugc">WPML</a></li>
<li><a href="https://wordpress.org/plugins/polylang/" rel="ugc">Polylang</a></li>
<li><a href="https://wordpress.org/plugins/loco-translate/" rel="ugc">Loco Translate</a></li>
<li><a href="https://wordpress.org/plugins/qtranslate-x/" rel="ugc">qTranslate-x</a></li>
<li><a href="https://wordpress.org/plugins/gtranslate/" rel="ugc">GTranslate</a></li>
<li><a href="https://wordpress.org/plugins/google-language-translator/" rel="ugc">Google Language Translator</a></li>
<li><a href="https://wordpress.org/plugins/wpglobus/" rel="ugc">WPGlobus</a></li>
</ul>
<h4>Page Builders Ready</h4>
<ul>
<li>Gutenberg</li>
<li>Elementor</li>
<li>Divi Builder</li>
<li>WPBakery</li>
<li>BeaverBuilder</li>
<li>SiteOrgin</li>
<li>Fusion Builder</li>
<li>Genesis Framework</li>
</ul>
<h4>Author</h4>
The Easy Accordion plugin is developed and maintained by <a href="https://shapedplugin.com/" rel="nofollow ugc">ShapedPlugin LLC</a>

Easy Accordion – Responsive Accordion FAQ Builder and Product FAQ


As a web developer, I need to choose plugins that are easy for my clients to manage. Easy Accordion FAQ builder is my go-to choice for Frequently Asked Questions. 


Easy to Setup, Great Interface!

Easily create Accordions, FAQs, and Product FAQ for WooCommerce. Customizable drag & drop WordPress FAQ builder plugin.

Good Accordion vs Easy Accordion – Responsive Accordion FAQ Builder and Product FAQ