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.

PickPlugins

Nafis Mahmud Ayon

<p>Transform the way you present content on your WordPress site with our React-based <strong>Accordions Builder Plugin</strong>. This versatile tool empowers users to create visually engaging and highly functional accordion elements, including tabs, image accordions, FAQs, toggled content, and more, all within an intuitive interface.</p>
<h3>Accordions by  <a href="https://pickplugins.com/" rel="nofollow ugc">PickPlugins</a></h3>
<ul>
<li><a href="https://pickplugins.com/accordions/" rel="nofollow ugc">Accordions – Premium »</a></li>
<li><a href="https://demo.pickplugins.com/accordions/" rel="nofollow ugc">Live Demo »</a></li>
</ul>
<h3>Key Features</h3>
<h4><strong>Accordion Functionalities</strong></h4>
<ul>
<li><strong>Auto Play</strong>: Automate the transition of accordion items for dynamic content display.</li>
<li><strong>Click to Scroll Top</strong>: Automatically scroll to the top of the accordion upon interaction for enhanced user navigation.</li>
<li><strong>Expand/Collapse All Button</strong>: Includes customizable text and icons with animations for seamless accordion management.</li>
<li><strong>Search Feature</strong>: Easily find accordion content with an integrated search function.</li>
<li><strong>Idle and Toggled Icons</strong>: Add animated in-out transitions for icons, enhancing visual appeal.</li>
<li><strong>Accordion Label Icons</strong>: Decorate your labels with custom icons for a professional touch.</li>
<li><strong>Schema Integration</strong>: Optimize your accordions for SEO with structured data support.</li>
<li><strong>Keep Expand Other</strong>: Allow multiple sections to remain open simultaneously for flexible content display.</li>
<li><strong>URL Hash Support</strong>: Link directly to specific accordion items for better navigation.</li>
<li><strong>Label Counter</strong>: Display the number of items or entries dynamically for user clarity.</li>
<li><strong>Content Animations</strong>: Smooth in-out animations make your accordion content more engaging.</li>
</ul>
<h4><strong>Powerful Builder Tools</strong></h4>
<ul>
<li><strong>Advanced Style Options</strong>: Customize each accordion section with our powerful style component. Adjust fonts, colors, spacing, and more for a pixel-perfect design.</li>
<li><strong>Content Editor</strong>: Effortlessly manage your accordion content with features like sortable items, duplication, and copy-paste between accordions.</li>
<li><strong>OpenAI Integration</strong>: Generate FAQs and other content in seconds using AI-powered tools, streamlining the content creation process.</li>
</ul>
<h3><strong>Tabs Features</strong></h3>
<ul>
<li><strong>Lazyload</strong>: Optimize page load times with lazy-loading tabs.</li>
<li><strong>URL Hash Support</strong>: Link directly to specific tabs for easier navigation.</li>
<li><strong>Auto Play</strong>: Cycle through tabs automatically.</li>
<li><strong>Interactive Navigation</strong>: Customizable icons, counters, and animations for navigation labels.</li>
<li><strong>Advanced Content Support</strong>: Embed media, use shortcodes, and add in-out animations for engaging tab content.</li>
<li><strong>Content Editor</strong>: Sort, duplicate, copy-paste, and generate FAQs with OpenAI integration.</li>
</ul>
<h3><strong>Image Accordion Features</strong></h3>
<ul>
<li><strong>Lazyload</strong>: Improve performance by lazy-loading images.</li>
<li><strong>URL Hash Support</strong>: Link directly to specific image accordion items.</li>
<li><strong>Auto Play</strong>: Enable automatic cycling through images.</li>
<li><strong>Hover Effects</strong>: Add overlay animations for a modern, interactive experience.</li>
<li><strong>Media Library Integration</strong>: Easily select images directly from the WordPress Media Library.</li>
</ul>
<h3>Why Choose the Accordions Builder Plugin?</h3>
<p>This plugin is designed to help you create stunning, interactive content elements effortlessly. With advanced styling options, smooth animations, and built-in AI support, you can deliver a polished, professional user experience on your WordPress site.</p>
<h3>Perfect for Every Use Case</h3>
<p>Whether you’re creating <strong>FAQs</strong>, <strong>accordion content</strong>, <strong>toggled content</strong>, or <strong>tabbed layouts</strong>, the Accordions Builder Plugin is your go-to solution for an engaging and professional WordPress site.</p>
<p>Project in Github<br />
* <a href="https://github.com/pickplugins/accordions" rel="nofollow ugc">https://github.com/pickplugins/accordions</a></p>
<h3>External services</h3>
<p>This plugin connects to an API to obtain ready templates library https://demo.pickplugins.com/accordions/</p>
<p>It send template query data like keywords, view types, page number to grab json data, so that json data can be used to generate slider templates.</p>
<ul>
<li><a href="https://pickplugins.com/terms-conditions/" rel="nofollow ugc">pickplugins.com/terms-conditions</a></li>
<li><a href="https://pickplugins.com/privacy-policy/" rel="nofollow ugc">pickplugins.com/privacy-policy/</a></li>
<li><a href="https://pickplugins.com/about-us/" rel="nofollow ugc">pickplugins.com/about-us/</a></li>
</ul>


Accordions

Create sleek accordions, tabs, FAQs, and image accordions with a React builder featuring advanced styling, animations, OpenAI support, and customizati …

Accordion Blocks vs Accordions