philbuchanan

<p>Accordion Blocks is a simple plugin that adds a Gutenberg block for adding accordion drop-downs to your pages.</p>
<p>The accordions should blend seamlessly with your theme. However, you may want to add custom styles to your theme.</p>
<h4>Features</h4>
<ul>
<li>Adds a Gutenberg block for adding accordions to your site.</li>
<li>Supports multiple accordions with individual settings for each accordion item.</li>
<li>Fully responsive.</li>
<li>Support for item IDs and direct links.</li>
<li>Supports nesting accordions.</li>
<li>Accessible (for users requiring tabbed keyboard navigation control).</li>
</ul>
<h4>Optional Features</h4>
<ul>
<li>Open individual accordion items by default.</li>
<li>Disable auto closing of accordion items.</li>
<li>Manually close items by clicking the title again.</li>
<li>Scroll page to title when it’s clicked open (including setting a scroll offset position).</li>
<li>Set the HTML heading tag for the title element (h1–h6, button).</li>
<li>Set defaults to be applied to all new accordion items or reset a specific accordion item to the defaults.</li>
<li>Supports adding custom block styles using <code>wp.blocks.registerBlockStyle</code>.</li>
</ul>
<h4>Output</h4>
<p>The plugin will ultimately output following HTML (simplified for this example):</p>
<pre><code><div class="wp-block-pb-accordion-item c-accordion__item js-accordion-item" data-initially-open="false" data-click-to-close="true" data-auto-close="true" data-scroll="false" data-scroll-offset="0">
    <h2 id="at-76840" class="c-accordion__title js-accordion-controller" tabindex="0" role="button" aria-controls="ac-76840" aria-expanded="false">
        Title with H2 tag
    </h2>
    <div id="ac-76840" class="c-accordion__content" style="display:none" aria-hidden="true">
        <p>Content</p>
    </div>
</div>
</code></pre>
<h4>Custom CSS</h4>
<p>You can use the following CSS classes to customize the look of the accordion.</p>
<pre><code>.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 */
</code></pre>


Accordion Blocks

Gutenberg block for creating responsive accordion drop-downs.

ShapedPlugin LLC

Rubel Miah

Md Khalil Uddin

Shamim Mia

<h4>Responsive WordPress Accordion, FAQ Builder & Product FAQ Plugin</h4>
<p><strong>Easy Accordion</strong> 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.</p>
<p>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.</p>
<span class="embed-youtube" style="text-align:center; display: block;"><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></span>
<p><a href="https://easyaccordion.io/easy-accordion-free-demo/" rel="nofollow ugc"><strong>Live Demo</strong></a> | <a href="https://docs.shapedplugin.com/docs/easy-accordion/introduction/" rel="nofollow ugc"><strong>Documentation</strong></a> | <a href="https://shapedplugin.com/create-new-ticket/" rel="nofollow ugc"><strong>Support</strong></a> | <a href="https://easyaccordion.io/pricing/?ref=1" rel="nofollow ugc"><strong>Upgrade to Pro!</strong></a></p>
<p>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.</p>
<h4>Main Features</h4>
<p><strong>Responsive Vertical Accordions</strong><br />
Create unlimited responsive accordion groups in vertical layouts for FAQs, product details, or content sections.</p>
<p><strong>Multi-level / Nested Accordions</strong><br />
Easily create nested accordion structures by adding FAQ groups inside another accordion item.</p>
<p><strong>Custom Post Type Support</strong><br />
Create and manage accordions or FAQs using a dedicated FAQ custom post type, giving you maximum content flexibility with the Gutenberg editor.</p>
<p><strong>Drag & Drop Accordion Builder</strong><br />
Arrange and organize accordion items instantly with an intuitive drag & drop interface.</p>
<p><strong>Multiple FAQ Sections or Pages</strong><br />
Display multiple FAQ sections on a single page or across different pages, each with its own unique design and settings.</p>
<p><strong>Accordion Activator Events</strong><br />
Choose how users or visitors trigger accordion transitions: either by clicking or hovering.</p>
<p><strong>Accordion Display Modes</strong><br />
Control how your accordion loads: First Open, All Open, or All Collapsed.</p>
<p><strong>Multiple Items Active Together</strong><br />
Allow multiple accordion panels to remain open simultaneously (toggle mode).</p>
<p><strong>Scroll to Active Item</strong><br />
Automatically scroll to the expanded accordion item for a smooth user experience.</p>
<p><strong>SEO-Friendly Schema Markup</strong><br />
Add a structured FAQ schema to improve search engine visibility and provide richer results.</p>
<p><strong>Customizable Toggle Icons</strong><br />
Show or hide expand/collapse icons, adjust their color, size, and position.</p>
<p><strong>Color and Styling Options</strong><br />
Easily customize titles, descriptions, colors, borders, spacing, and typography to match your site’s design perfectly.</p>
<p><strong>Import and Export FAQs</strong><br />
Easily import or export FAQs, with support for multiple file types.</p>
<h4>For Support, Feature Requests, and Bug Reporting</h4>
<blockquote>
<p>Ask us at <a href="https://shapedplugin.com/create-new-ticket/" rel="nofollow ugc"><strong>Support</strong></a></p>
</blockquote>
<h4>Easy Accordion Pro</h4>
<blockquote>
<p><a href="https://easyaccordion.io/?ref=1" rel="nofollow ugc"><strong>Easy Accordion Pro</strong></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.</p>
<p>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>.</p>
</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>
<p>The Easy Accordion plugin is developed and maintained by <a href="https://shapedplugin.com/" rel="nofollow ugc"><strong>ShapedPlugin LLC</strong></a></p>


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.

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