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.

WPJoli

<p>Joli FAQ SEO is a FAQ plugin for WordPress. Show your FAQs using our built-in Gutenberg block or by shortcode.</p>
<p>Wishing to <strong>reduce your support requests & optimize your SEO</strong> ? Create stunning multiple FAQs in a breeze with our <strong>One-page FAQ Builder</strong>!</p>
<p>Joli FAQ SEO has been carefully crafted to be the best easy-to-use plugin, optimized, and is fully responsive and mobile friendly.</p>
<h4>⭐ CHECK OUR OTHER PLUGINS</h4>
<ul>
<li><a href="https://wordpress.org/plugins/smart-auto-featured-image/" rel="ugc">Smart Auto Featured Image</a></li>
<li><a href="https://wordpress.org/plugins/joli-table-of-contents/" rel="ugc">Joli Table Of Contents</a></li>
<li><a href="https://wordpress.org/plugins/joli-clear-lightbox/" rel="ugc">Joli CLEAR Lightbox</a></li>
</ul>
<h3>🚀 TOP GRADE PERFORMANCE</h3>
<p><strong>❌ NO jQuery</strong>: Unlike most of the FAQ plugins, Joli FAQ SEO does not use jQuery on the front-end, ✅ <strong>Only plain Javascript</strong> packed in a tiny <4KB minified file.</p>
<p><strong>❌ NO extra resources</strong>: Each visual element is made from pure CSS (<6KB minified). This means no extra http requests to additionnal resources that would slow down your website and affect badly your SEO.</p>
<p><strong>Performance friendly</strong>: Styles & Scripts DO NOT load unless they really have to.</p>
<h3>📐 One-page Drag-n-Drop FAQ Editor</h3>
<p>Stop the headaches right now while creating your FAQs! No more going back and forth through the admin pages. Save yourself time and trouble!</p>
<ul>
<li>Manage all your FAQs in just one screen, no page reload!</li>
<li>Create FAQ Groups and add as many FAQs inside them.</li>
<li>Single FAQs can be used in multiple FAQ Groups, and are synced.</li>
<li>Organize FAQs by categories.</li>
<li>Intuitive Drag-n-Drop support: Organize FAQs & FAQ Groups in the desired ordered, move FAQs from one group to another or into multiple FAQ Groups.</li>
</ul>
<h3>👁 Instant FAQ Preview from the settings</h3>
<p>Find out instantly what your FAQ is going to look like on the front-end.</p>
<p>From the plugin’s settings page, the instant preview reloads as you change settings, but the settings’ page doesn’t need to.</p>
<h3>🌎🔍 Optimized for SEO</h3>
<p>Automatically generates Schema.org FAQPage  Structured Data in JSON-LD format within your page.</p>
<p>That crucial data is picked up by search engines such as Google and improve your SEO.</p>
<p>Additionally, you may benefit FAQ Rich-content results in the SERPs and get more visibility in the search results page.</p>
<p>https://developers.google.com/search/docs/data-types/faqpage</p>
<h3>✂👗 Customizable to match your preferences</h3>
<p>Integrates to your website’s theme perfectly. Use the standard Accordion mode, or let the users expand as many FAQs as they like.</p>
<p>Optionally, use the Flat layout to make the FAQs look like normal content (without expandable sections) while still leveraging structured data.</p>
<ul>
<li>Choose from our beautiful Themes</li>
<li>Nice & smooth CSS animations</li>
<li>Pure CSS toggle button icons</li>
<li>Left or Right toggle button position</li>
<li>Choose toggle button size</li>
<li>Customize Q&A colors, font size, and more…</li>
<li>Override selected theme’s presets with custom styles.</li>
</ul>
<h3>⏹️ [PRO] Edit FAQ with the Gutenberg Block editor</h3>
<p>Leverage the power of the block editor to create stunning FAQs!</p>
<p>From the version 1.2.0, you can now edit FAQs using blocks. This allows you to create beautiful FAQs by leveraging all the power from the block editor.</p>
<p>For example, you can easily create columns, buttons, and much more.</p>
<h3>⚙️ [PRO] Override settings per FAQ Group (from the shortcode or the block)</h3>
<p>In the free version of the plugin, all FAQs inherit from the plugin’s settings (themes & options). They all look & behave the same.</p>
<p>The Pro version allows you to override any setting to customize a specific FAQ Group. You can override multiple settings at once in the following fashion:</p>
<pre><code>[joli-faq-seo id="123" theme="theme-2" accordion="1"]
</code></pre>
<p>If you are using the FAQ Group block, you can override any setting directly from the block options.</p>
<h3>🛒 [PRO] WooCommerce Integration</h3>
<p>WooCommerce FAQ: Easily attach FAQs to WooCommerce product pages.</p>
<p>FAQs will show in a new tab next to the product description.</p>
<p>Optionally use the shortcode to show the FAQ within the product description or anywhere else.</p>
<h3>🔎 [PRO] Instant search bar</h3>
<p>The instant search feature is a powerful addition to your FAQs, especially if you have many in one group. It lets the users filter the FAQs for them to find instantly what’s he’s looking for.</p>
<p>From the search bar above the FAQ Group, matching text is instantly highlighted with a color as the user types.</p>
<p>Search is performed in both Questions & Answers.</p>
<h3>🌐 [PRO] Link to any FAQ</h3>
<p>You can now display a copy to clipboard icon shortcut on each FAQ.</p>
<p>This will allow you or your visitors to get a direct link to a specific FAQ.</p>
<p>The FAQ will open automatically on page load when using the link.</p>
<h3>😄 [PRO] Emoji Picker</h3>
<p>From the FAQ Editor, optionally pick an emoji for each single FAQ you want. The built-in emoji picker lets you <strong>search emojis by keyword</strong>.</p>
<p>Selected emojis will show on the left of the actual FAQ Question.</p>
<ul>
<li><strong>Improved SEO</strong>: Make your content more visible in the SERPs with emojis*</li>
<li><strong>Emphazise</strong>: Grab the user’s attention for important FAQs.</li>
</ul>
<p><strong><em>Example</em></strong>:<br />
* <strong>What is the average delivery time ?</strong> <em>(without emoji)</em><br />
* <strong>🚚 What is the average delivery time ?</strong> <em>(with emoji)</em></p>
<p>*<em>Displaying emojis in the SERPs is totally up to Google.</em></p>
<h3>📊 [PRO] Smart Insights</h3>
<p>Find out which FAQs are the most viewed & automatically order them by user engagement.</p>
<p>From the FAQ Editor, the view count show on each FAQs from a group. This lets you know which FAQs are the most looked at.</p>
<p>A single user can only register one View count for one day. This prevents duplicate counts if one user clicks multiple times on a single FAQ.</p>
<h3>❌ [PRO] Disable individual FAQ / FAQ Group</h3>
<p>Temporarily disable a single FAQ or a single FAQ Group directly from the editor.</p>
<p>Disabled FAQ/FAQ Groups will not show on the front-end despite the shortcode being active.</p>
<p>No need to update your posts/pages, changes are instantaneous throughout the website.</p>
<h3>[PRO] Organize your FAQs by categories</h3>
<p>From the FAQ editor, create unlimited number of categories and keep your FAQs organized.</p>
<h3>👨‍💻 Developer friendly</h3>
<p>Joli FAQ SEO leverages the power of WordPress Hooks.</p>
<p>It provides a wide variety of Actions and Filters that you can hook onto.</p>
<p>It also provides custom Javascript events</p>
<h4>💪 Joli FAQ SEO PRO</h4>
<p>Want an even better FAQ Plugin for your WordPress site ?<br />
<a href="https://wpjoli.com/joli-faq-seo" rel="nofollow ugc">Get Joli FAQ SEO Pro here</a></p>
<h3>Schema.org FAQPage</h3>
<p>Here is an exemple of what is printed wihtin the page.<br />
Keep in mind that this is not actually visible to the end-user.<br />
It is only meant to be crawlable by search engines.</p>
<pre><code><script type="application/ld+json">
{
    "@context":"https://schema.org",
    "@type":"FAQPage",
    "mainEntity":[
        {
            "@type":"Question",
            "name":"How does it improve my SEO ?",
            "acceptedAnswer":{
                "@type":"Answer",
                "text":"It automatically adds JSON-LD structured data in your page based on the <a href=\"https://schema.org\" target=\"_blank\" rel=\"noopener noreferrer\">schema.org FAQPage format.\n"
            }
        },
        {
            "@type":"Question",
            "name":"Is it easy to use ?",
            "acceptedAnswer":{
                "@type":"Answer",
                "text":"Yes, the one page drag and drop editor makes creating and editing FAQ a breeze!\n"
            }
        },
        ...
    ]
}
</script>
</code></pre>
<h4>FAQ Group Block (Gutenberg)</h4>
<p>For easier editing, Joli FAQ SEO now comes with a built-in block in addition or replacement to the shortcode.</p>
<h4>Shortcode</h4>
<p>Use the following shortcode, replacing the id with the actual faq group id :</p>
<pre><code>[joli-faq-seo id="123"]
</code></pre>
<p>Override any option by shortcode [PRO]</p>
<pre><code>[joli-faq-seo id="123" theme="2"]
</code></pre>
<h4>CHECK OUR OTHER PLUGINS</h4>
<ul>
<li><a href="https://wordpress.org/plugins/joli-table-of-contents/" rel="ugc">Joli Table of Contents</a></li>
<li><a href="https://wordpress.org/plugins/joli-clear-lightbox/" rel="ugc">Joli CLEAR Lightbox</a></li>
</ul>


Joli FAQ SEO – WordPress FAQ Plugin

The best WordPress FAQ plugin: easy & fast single page drag n drop editor, lightweight, no jQuery, block-enabled, schema.org, optimized for SEO.

Good Accordion vs Joli FAQ SEO – WordPress FAQ Plugin