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.

WP Forhad

nazmulfeni4

Pluginic

<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/lt47dkfWbCI?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>
<p><a href="https://demo.pluginic.com/faq-schema-ultimate/" rel="nofollow ugc"><strong>Live Demo</strong></a> | <a href="https://pluginic.com/plugins/faq-schema-ultimate/" rel="nofollow ugc"><strong>Premium Version (30% OFF)</strong></a> | <a href="https://pluginic.com/docs/faq-schema-ultimate-overview/" rel="nofollow ugc"><strong>Documentation</strong></a>  | <a href="https://demo.pluginic.com/faq-schema-ultimate/accordion-demo/" rel="nofollow ugc"><strong>Accordion FAQ Example</strong></a>  | <a href="https://demo.pluginic.com/faq-schema-ultimate/tabs-demo/" rel="nofollow ugc"><strong>Tabbed FAQ Example</strong></a>  | <a href="https://demo.pluginic.com/faq-schema-ultimate/slider-demo/" rel="nofollow ugc"><strong>Slider FAQ Example</strong></a> | <a href="https://pluginic.com/support/" rel="nofollow ugc"><strong>Support Ticket</strong></a></p>
<p>Looking for a comprehensive FAQ solution for your WordPress site?</p>
<p>This responsive and user-friendly plugin provides accordion-style, tabbed, and slider formats to display your FAQs in a stylish and organized manner.</p>
<p>You can add FAQ Schema markup to your WordPress site easily with this plugin. This FAQ rich snippets plugin helps you create structured FAQ data compatible with Yoast and Rank Math. The plugin passes Google’s FAQ schema validation.</p>
<p>It’s compatible with Elementor and Gutenberg Block Editor, making it easy to integrate into your website. Download this FAQ plugin for WordPress now and give your visitors an exceptional FAQ experience.</p>
<p>Say goodbye to confusion and hello to simplicity with this feature-packed plugin.</p>
<h3>KEY FEATURES</h3>
<ul>
<li>Pre-Made FAQ Templates</li>
<li>FAQ Schema Markup Support</li>
<li>Fully Responsive Accordion FAQ</li>
<li>Fully Responsive Tabbed FAQ</li>
<li>FAQ Slider with Full Responsiveness</li>
<li>Fully Responsive FAQ Block</li>
<li>Elementor & Gutenberg Support</li>
<li>Compatible with Rank Math and Yoast SEO</li>
<li>FAQ Theme Widget</li>
<li>Drag and Drop Feature</li>
<li>Integrated Toggle and Collapse Effects</li>
<li>Perfect for Beginners</li>
<li>FAQ Accordion System + Design</li>
<li>Expand & Collapse Icon Color</li>
<li>Accordion Title Background Color</li>
<li>Accordion Description Text and Background Color</li>
<li>Unlimited Color and Styling Options</li>
<li>Shortcode Support</li>
<li>Custom CSS Field to Override Styles</li>
<li>WooCommerce Product FAQ Support</li>
<li>Multiple FAQ Groups</li>
<li>Search Functionality</li>
<li>Print Functionality</li>
<li>Email Functionality</li>
<li>Category and Tag Support</li>
<li>Custom Post Type Support</li>
<li>Translation Ready</li>
<li>RTL Support</li>
<li>Cross-Browser Compatible</li>
<li>Lightweight and Fast Loading</li>
</ul>
<h3>WHAT IS FAQ SCHEMA?</h3>
<p>FAQ Schema is structured data markup that helps search engines understand your FAQ content. When properly implemented, it can result in rich snippets appearing in Google search results, displaying your questions and answers directly in the search listings. This can significantly improve your click-through rates and visibility in search results.</p>
<h3>DISPLAY FORMATS</h3>
<h3>Accordion Style</h3>
<p>Display your FAQs in a classic accordion format where users can click to expand and collapse questions. This format is perfect for saving space while providing easy access to information.</p>
<h3>Tabbed Layout</h3>
<p>Organize your FAQs into tabs for better categorization. Users can switch between different FAQ categories with a single click.</p>
<h3>Slider Format</h3>
<p>Present your FAQs in a modern slider format, perfect for showcasing important questions on your homepage or landing pages.</p>
<h3>GUTENBERG BLOCK EDITOR SUPPORT</h3>
<p>The plugin includes a dedicated Gutenberg block for adding FAQs directly in the Block Editor. Features include:</p>
<ul>
<li>Live preview while editing</li>
<li>Full customization options</li>
<li>Drag and drop reordering</li>
<li>Schema markup integration</li>
<li>Multiple display styles</li>
</ul>
<h3>ELEMENTOR INTEGRATION</h3>
<p>For Elementor users, the plugin provides custom widgets:</p>
<ul>
<li>FAQ Accordion Widget</li>
<li>FAQ Tabs Widget</li>
<li>FAQ Slider Widget</li>
<li>Full styling controls</li>
<li>Responsive options</li>
<li>Animation effects</li>
</ul>
<h3>WOOCOMMERCE SUPPORT</h3>
<p>Add product-specific FAQs to your WooCommerce product pages. Help customers make informed purchase decisions by answering common questions directly on product pages.</p>
<h3>SEO BENEFITS</h3>
<h3>Rich Snippets in Google</h3>
<p>Properly implemented FAQ Schema can result in your FAQs appearing as rich snippets in Google search results, increasing visibility and click-through rates.</p>
<h3>Compatible with SEO Plugins</h3>
<p>Works seamlessly with:<br />
– Yoast SEO<br />
– Rank Math<br />
– All in One SEO<br />
– The SEO Framework</p>
<h3>Structured Data Validation</h3>
<p>The plugin’s FAQ Schema markup passes Google’s Rich Results Test and Schema Markup Validator.</p>
<h3>CUSTOMIZATION OPTIONS</h3>
<h3>Styling Controls</h3>
<ul>
<li>Custom colors for all elements</li>
<li>Typography settings</li>
<li>Border and spacing options</li>
<li>Icon customization</li>
<li>Background options</li>
<li>Hover effects</li>
</ul>
<h3>Layout Options</h3>
<ul>
<li>Single column or multi-column layouts</li>
<li>Grid or list display</li>
<li>Custom widths</li>
<li>Spacing controls</li>
</ul>
<h3>Behavior Settings</h3>
<ul>
<li>Expand/collapse speed</li>
<li>Single or multiple open FAQs</li>
<li>Auto-close options</li>
<li>Smooth scrolling</li>
</ul>
<h3>SHORTCODE USAGE</h3>
<p>Display FAQs anywhere on your site using simple shortcodes:</p>
<pre><code>[faq_schema_ultimate] - Display all FAQs
[faq_schema_ultimate id="123"] - Display specific FAQ group
[faq_schema_ultimate category="product"] - Display FAQs by category<h3>PRO VERSION FEATURES</h3>
</code></pre>
<p>Upgrade to Pro for advanced features:</p>
<ul>
<li>10+ Premium Templates</li>
<li>Advanced Styling Options</li>
<li>Priority Support</li>
<li>WooCommerce Deep Integration</li>
<li>Advanced Search with Ajax</li>
<li>FAQ Import/Export</li>
<li>Custom Fields</li>
<li>Video FAQ Support</li>
<li>FAQ Analytics</li>
<li>And much more!</li>
</ul>
<p><a href="https://pluginic.com/plugins/faq-schema-ultimate/" rel="nofollow ugc">Get Pro Version (30% OFF)</a></p>
<h3>USE CASES</h3>
<h3>E-Commerce Stores</h3>
<p>Answer common product questions, shipping queries, and return policies.</p>
<h3>Service Businesses</h3>
<p>Explain your services, pricing, and booking procedures.</p>
<h3>SaaS Companies</h3>
<p>Provide technical support and feature explanations.</p>
<h3>Educational Sites</h3>
<p>Create course FAQs and enrollment information.</p>
<h3>Healthcare Websites</h3>
<p>Answer patient questions and provide medical information.</p>
<h3>Real Estate Agencies</h3>
<p>Explain property features and buying/renting processes.</p>
<h3>MULTILINGUAL SUPPORT</h3>
<p>The plugin is translation-ready and compatible with:</p>
<ul>
<li>WPML</li>
<li>Polylang</li>
<li>qTranslate-X</li>
<li>Loco Translate</li>
<li>TranslatePress</li>
</ul>
<h3>PERFORMANCE OPTIMIZED</h3>
<ul>
<li>Lightweight code</li>
<li>Minimal HTTP requests</li>
<li>Lazy loading support</li>
<li>Optimized database queries</li>
<li>Fast rendering</li>
<li>Mobile optimized</li>
</ul>
<h3>DEVELOPER FRIENDLY</h3>
<ul>
<li>Clean, well-documented code</li>
<li>Action and filter hooks</li>
<li>Template override support</li>
<li>Custom CSS options</li>
<li>REST API support</li>
</ul>
<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/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</h4>
<p>Works with:</p>
<ul>
<li>Gutenberg Block Editor</li>
<li>Elementor</li>
<li>WPBakery</li>
<li>Divi Builder</li>
<li>Beaver Builder</li>
<li>Oxygen Builder</li>
</ul>


FAQ Schema – Accordion, Tab, Slider & Gutenberg Block

There is no plugin section in the Wordpress menu.

Does not work

Create responsive FAQs with accordion, tabs, and slider layouts. Includes FAQ Schema markup, Gutenberg blocks, and Elementor widgets.

Good Accordion vs FAQ Schema – Accordion, Tab, Slider & Gutenberg Block