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.

M Asif Rahman

Rupok

WPDeveloper

Rahat Hossain

Md Monir Hossain

Hanzala Taifun

<p><strong>Accordion Toggle</strong> helps you display FAQs or key pieces of content in a way that readers can easily find what they are looking for. Using this Accordion Toggle plugin, you can create those key contents within Gutenberg.</p>
<p><strong>STUNNING FEATURES:</strong><br />
 – Add images, videos, or any other multiple blocks under your accordion<br />
 – Create unlimited nested accordion sections under one accordion<br />
 – Get listed in search engines with FAQ schema support<br />
 – Make your accordion toggle multipurpose without coding</p>
<p><strong>Completely Customizable:</strong> You can customize Accordion Toggle just the way you want.</p>
<p><strong>Modular Control:</strong> You can easily disable unnecessary blocks from the settings panel and speed up your website.</p>
<p><strong>Super Light-weight:</strong> No extra resources used and it’s highly optimized for super fast loading & instant Live editing.</p>
<p><strong>Dedicated Support:</strong> We’ve an extraordinary support team ready to help you. Ask your questions in the support forum, we’ll get back to you immediately.</p>
<h3>🚀 BACKED BY A TRUSTED TEAM</h3>
<p>This Block is brought to you by <a href="https://wpdeveloper.com" rel="nofollow ugc">WPDeveloper</a>, the team behind the most popular elements library <a href="https://wordpress.org/plugins/essential-addons-for-elementor-lite/" rel="ugc">Essential Addons for Elementor</a> (used by almost 1 million+ happy users from 180+ countries).</p>
<h3>👨‍💻 DOCUMENTATION AND SUPPORT</h3>
<ul>
<li>For documentation and tutorials go to our <a href="https://essential-blocks.com/docs/" rel="nofollow ugc">documentation</a></li>
<li>To report issue and contribution visit <a href="https://github.com/EssentialBlocks/accordion-toggle" rel="nofollow ugc">Github</a>.</li>
<li>If you have any more questions, visit our support on the <a href="https://wordpress.org/support/plugin/accordion-toggle" rel="ugc">Plugin’s Forum</a>.</li>
<li>For more information about features, FAQs and documentation, check out our website at <a href="https://wpdeveloper.com/" rel="nofollow ugc">WPDeveloper</a>.</li>
</ul>
<h3>🙌 JOIN THE COMMUNITY</h3>
<p>🎦 Subscribe to our <a href="https://www.youtube.com/wpdevelopernet/?sub_confirmation=1" rel="nofollow ugc">Youtube Channel</a> to watch video tutorials on WordPress.</p>
<p>🤝 Join our <a href="https://www.facebook.com/groups/wpdeveloper.net/" rel="nofollow ugc">Facebook Community</a> & get connected with expert web creators like yourself.</p>
<p>🧡 LOVED Accordion/Toggle? Rate us on <a href="https://wordpress.org/support/plugin/accordion-toggle/reviews/" rel="ugc">WordPress Repository</a></p>
<p>🔥 GET FREEBIES FOR YOUR WORDPRESS SITE</p>
<p>Consider checking out our other WordPress solutions & boost your WordPress website:</p>
<p>💡 <a href="https://wordpress.org/plugins/essential-blocks/" rel="ugc">Essential Blocks For Gutenberg</a> Get all stunning & interactive Gutenberg blocks to design your website seamlessly</p>
<p>🔝 <a href="https://wordpress.org/plugins/essential-addons-for-elementor-lite/" rel="ugc">Essential Addons For Elementor</a>: Most popular Elementor addons with 70+ widgets & ready blocks</p>
<p>☁ <a href="https://wordpress.org/plugins/templately/" rel="ugc">Templately</a>: Free templates library for Elementor & Gutenberg along with the cloud collaboration for WordPress</p>
<p>🔔 <a href="https://wordpress.org/plugins/notificationx/" rel="ugc">NotificationX</a>: Best Social Proof & FOMO Marketing Solution to increase conversion rates</p>
<p>📚 <a href="https://wordpress.org/plugins/betterdocs/" rel="ugc">BetterDocs</a>: Best Documentation & Knowledge Base Plugin for WordPress reduce manual support tickets & improve user experience.</p>
<p>⏰ <a href="https://wordpress.org/plugins/wp-scheduled-posts/" rel="ugc">WP Scheduled Posts</a>: Advanced editorial calendar & complete solution for WordPress Post Scheduling, social sharing, missed scheduled alerts and more.</p>
<p>⭐ <a href="https://wordpress.org/plugins/reviewx/" rel="ugc">ReviewX</a>: WooCommerce Product review plugin that allows users to submit product reviews with multiple criteria, photos, video and more</p>
<p>⚡ <a href="https://wordpress.org/plugins/flexia" rel="ugc">Flexia</a>: Most lightweight, customizable & multi purpose theme for WordPress</p>


Accordion Toggle

This is my second review of this plugin. Previously it only supported plain-text content, not even links. It has changed, but not for the better.

Problem 1: How to add content!@#!!&*
I installed this and added one to a page, which started me out with three empty headings. I then clicked around for several minutes trying to see how to add content to a section.

Eventually I happened upon the answer -- you have to add an accordion item to the ones it inserts by default. If you do that, opening handles appear on all the items and you can expand them to add content.

It's very difficult to imagine how this wasn't noticed by the developer if they did any testing AT ALL.

Problem 2: Doesn't work in preview mode.
Using Twenty Twenty-One theme, no special style rules. Apparently the stylesheet for the plugin doesn't load in preview.

Problem 3: Editor appearance doesn't reflect selected options.
This seems to be a variation on the first problem. I select Classic vs Gradient appearance for the tabs, and nothing changes. I save and view the page (since as noted, preview doesn't work) and the titles still have gradient appearance.

After multiple edits, I got the "classic" styling to work, but when I put a nested accordion block into one of the sections, its tabs had the same styling as the containing accordion -- the options I selected for the nested block were ignored.

Bottom line:
This was sloppily done, and released with basically no testing. I have lost all confidence in this developer and will not be reviewing any future versions.

Unusable

Display Your FAQs & Improve User Experience with Accordion/Toggle block.

Accordion Blocks vs Accordion Toggle