J. Duijvelshoff

<p>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.</p>
<p>Features:</p>
<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>
<p>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.</p>
<h3>styling</h3>
<p>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:</p>
<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>
<p>The default values can also be defined in the theme.json of your (child-) theme:</p>
<p>Add them to the theme.json like so:</p>
<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.

Freemius

Essekia

pauple

<p>Accordion, FAQ & Docs – Helpie FAQ is an advanced WordPress FAQ Plugin for effortlessly creating, editing, and embedding FAQs and Accordions on your WordPress website. You can create a stunning Docs pages easily (Coming Soon).</p>
<p>You can create FAQ posts, assign them categories & tags and use responsive Toggle or Accordion-style, and display FAQs anywhere on the website.</p>
<p>FAQs can be grouped and filtered using FAQ categories and tags and displayed using shortcodes, Elementor page builder, or as a widget in the theme.</p>
<p>There is a basic shortcode builder with which you can add FAQs to all pages and posts. It has a FAQ block for Gutenberg Editor.</p>
<p>You can use it as a general-purpose WordPress Accordion Plugin too.</p>
<p>Display all FAQs in simple accordion style using the shortcode given below:</p>
<pre><code>[helpie_faq]
</code></pre>
<p><strong>Note</strong> : We’ve launched a new free WordPress contact form database and automation plugin called <a href="https://wordpress.org/plugins/tablesome/" rel="ugc">Tablesome</a> to save contact form submissions, create responsive data tables, import and export tables as CSV & XLSX files, automatically export data to Mailchimp, Notion, Google Sheets and more.<br />
Do give it a try!</p>
<p><a href="http://demo.helpiewp.com/" rel="nofollow ugc">See Demo</a></p>
<p><a href="http://helpiewp.com/docs/products/helpiefaq/" rel="nofollow ugc">Read Documentation</a></p>
<h3>Features</h3>
<ul>
<li>Fully responsive Accordion/Toggle</li>
<li>FAQ-Accordion block for Gutenberg</li>
<li>Automatically adds FAQ Schema</li>
<li>Basic FAQ Shortcode builder for all pages and posts</li>
<li>FAQ-WooCommerce Integration</li>
<li>FAQ-Accordion tab on WooCommerce product page</li>
<li>Add FAQs in bulk using Groups</li>
<li>Drag & Drop sorting of FAQs in Groups</li>
<li>Inline FAQ search-bar</li>
<li>Enable/Disable FAQ search-bar</li>
<li>FAQ theme widget</li>
<li>Display Popular and Recently Added/Updated FAQs</li>
<li>Sorting and Filtering of FAQs</li>
<li>Limit number of FAQs displayed</li>
<li>FAQ List view display mode</li>
<li>FAQ Header and Body styling options</li>
<li>Elementor integration – Accordion/FAQ widgets</li>
<li>Helpie Knowledge base integration</li>
<li>Use Helpie KB categories for FAQs</li>
<li>Display FAQs based on categories</li>
<li>Display FAQs to all products/Product Categories in WooCommerce</li>
<li>Adds URL attribute for FAQs</li>
</ul>
<p>See the video to Get Started: Installation, Activation, Adding FAQs and Using Shortcodes</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/oN-e6Fmdolk?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>FAQ Groups to add FAQs in bulk</h3>
<p>Easily add a large number of questions and answers to create FAQ pages in the backend and embed them on any page or post with a shortcode.<br />
You can drag or drop to order the FAQs. You can add Categories to FAQs created in FAQ Groups.</p>
<h3>FAQ Header and Body Styling options</h3>
<p>You can customize the background color, font, font color, font size, and content padding of the FAQ Header and Body. You can also change the color of the Toggle icon to match the content.<br />
It also works with many popular WordPress themes and plugins such as Avada, Divi, Flatsome, Yoast, etc.,</p>
<h3>FAQ for WooCommerce ( Woocommerce FAQs / Product FAQs )</h3>
<p>An FAQ tab can be created on WooCommerce product pages and FAQs can be added and edited for individual WooCommerce products. It makes it easy to answer your customer’s common questions on the product pages themselves.<br />
It can also be used for non-FAQ content for WooCommerce accordion tabs. You can add FAQs to all WooCommerce products or specific product categories using <strong>Helpie FAQ Pro</strong>.</p>
<p>For more information on WooCommerce integration see the video below:</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/dDOGzRPZCtk?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>FAQ List View</h3>
<p>Display FAQs in a simple list display without accordion/toggle. FAQ Schema and heading tags will still apply in this display mode.<br />
You can also list FAQs based on Categories.</p>
<h3>FAQ for Elementor ( Elementor FAQ – Accordion widget )</h3>
<p>Helpie FAQ plugin can be integrated with the Elementor page builder using 2 Elementor widgets.<br />
1. <strong>Helpie FAQ – Dynamic Add Widget</strong> – to add Accordions to any Elementor page dynamically and edit the content using Elementor live editor<br />
2. <strong>Helpie FAQ widget</strong> – to embed pre-made FAQs anywhere on the Elementor canvas.</p>
<p><strong>To Dynamically Create FAQs and Accordions with Elementor see the video below</strong>:</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/LR7mXg2f8ds?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&start=218&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p>To embed the pre-made FAQs with Elementor see the video below:</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/2Y4wApE2F78?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>FAQ block for Gutenberg ( Gutenberg FAQ Block )</h3>
<p>Helpie FAQ provides an FAQ block for the new Gutenberg WordPress Editor, which allows you to add FAQs with all the settings and customizations in the editor itself.</p>
<h3>FAQ for Helpie Knowledge Base ( WordPress Knowledge Base + FAQs )</h3>
<p>Helpie FAQ plugin can be integrated with <a href="http://helpiewp.com/" rel="nofollow ugc"><strong>Helpie Knowledge base plugin</strong> </a> and the knowledge base categories can be used for FAQs. This can help add a FAQ section to your knowledge base based on categories.</p>
<p>Helpie FAQs need not be used to display only frequently asked questions content. You can use it for any content which needs to be hidden until clicked</p>
<p>You can also create a powerful FAQ / Knowledge Base section on your website using Elementor Page Builder. <a href="https://helpiewp.com/knowledge-base-elementor-template-builder-integration/" rel="nofollow ugc"><strong>Check out how >></strong></a></p>
<h3>Helpie FAQ Pro Plugin</h3>
<p><a href="https://helpiewp.com/wordpress-faq-plugin/" rel="nofollow ugc"><strong>Helpie FAQ Pro Plugin</strong></a> has features such as User FAQ submission by which any users can submit their Questions and Answers which can be added to the FAQs on that page with or without the approval of the admin.</p>
<h3>WooCommerce Questions and Answers (Q&A)</h3>
<p>Want to add an ‘Ask A Question’ section to WooCommerce products? Helpie FAQ allows you to add a <a href="https://helpiewp.com/woocommerce-questions-and-answers/" rel="nofollow ugc">Questions and Answers tab</a> (Q&A Tab) to WooCommerce product pages, next to WooCommerce Description and Review tabs.<br />
The Admin, Customers or anyone with access can ask questions related to products and other Customers, Shop Manager or the Admin can add the product answers.</p>
<h3>LMS Support (for Groups)</h3>
<p>You can add FAQs to Courses and Lessons of LearnDash LMS, Tutor LMS and LearnPress LMS plugins.</p>
<h3>Premium Styling Options</h3>
<p>Helpie FAQ Pro allows you to customize almost every part of your FAQ section such as the FAQ Title, Toggle Icons, Category Title, in addition to the FAQ Header & Body background and content in the free plugin.</p>
<h4>FAQ Search Styling</h4>
<p>You can customize the background color, icon color, and font color of the search bar.</p>
<h4>FAQ Title Styling</h4>
<p>You can change the alignment, font, font color, and font size of the FAQ Title. You could also choose to hide or show the FAQ Title.</p>
<h4>Custom FAQ toggle icons</h4>
<p>You get to choose from a huge list of icons for FAQ open and close options. You can change the default toggle icons, their color, and their placement in the accordion.</p>
<h4>Custom Icon for FAQ & Category Titles</h4>
<p>You can place a icon before FAQ and Category Titles. Keep an title icon that best describes your FAQ and Categories.</p>
<h3>Other Pro Features</h3>
<h4>Read More Link (Show Excerpt) in FAQs</h4>
<p>In the FAQ Body area, if you have long content you can show excerpt with limited words and display a Read More link to a single FAQ page.</p>
<h4>Pagination for FAQs</h4>
<p>When you have many number of FAQs, you can apply FAQ pagination for them and limit the number of FAQs displayed on a single page. Users can easily navigate to the next page and find the information they need.</p>
<h4>User FAQ submission</h4>
<p>Users can submit questions directly from the FAQ section, which you can directly publish there or it can be sent for moderation. Both Admin and Users will get email notifications.</p>
<h4>Keep FAQ Slug as Anchor link</h4>
<p>The default FAQ anchor link comes with FAQ Post Id. You can change the anchor link to show FAQ slugs for better identification.</p>
<h4>Search FAQs using tags</h4>
<p>You can add WordPress Tags to FAQs so that when users search using a given Tag as the keyword, all the FAQs attached to the Tag will be brought in the search results. This will helpful for users to find FAQs when they are searching for answers when there are many questions and answers.</p>
<h4>Create FAQs once and display them on multiple WooCommerce products</h4>
<p>You can display an FAQ on all products and for specific WooCommerce product categories.</p>
<h4>FAQ Insights and Analytics</h4>
<p>It helps you to understand your customers better. Know which FAQs are most read and see which keywords are most searched on your FAQ page.</p>
<h4>Auto-ordering of FAQs based on User Engagement</h4>
<p>It automatically brings the most viewed FAQs first to bring the most useful answers that your users are looking for.</p>
<h3>Category Accordion Menu for Woocommerce & Other CPTs</h3>


Helpie FAQ — Accordion, Docs & Knowledge Base

Accordion , FAQ & Docs builder with Drag and Drop features. Helpie Accordion FAQ plugin works with Helpie Knowledge Base , Woocommerce & Elementor

Good Accordion vs Helpie FAQ — Accordion, Docs & Knowledge Base