J. Duijvelshoff

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

tychesoftwares

John Gardner

shasvat

Add an easy-to-create, stylish FAQ section to your website. Display your frequently asked questions using the supplied shortcode (<code>[faq]</code>) and show/hide them via an animated, jQuery toggle or accordion box. 
The FAQ’s can be displayed in groups by tagging them during the FAQ item’s creation. They can also be loaded closed or open, and for long FAQ’s, there’s a checkbox to add a “return to top” link at the bottom.
<a href="http://demo.tychesoftwares.com/faq/faq-plugin-demo/" rel="nofollow ugc">Live Demo</a> 
<a href="https://www.tychesoftwares.com/docs/docs/faq/" rel="nofollow ugc">Documentation</a>
<blockquote>
Easy to use and looks great Tried four other big name FAQ plugins before this one. All the others had show stopper issues. This one just worked and looks great. 
 <a href="https://wordpress.org/support/topic/easy-to-use-and-looks-great-17/" rel="ugc">jmiezitis</a>
</blockquote>
<h4>Features</h4>
<ul>
<li>Custom Post-Type driven</li>
<li>jQuery toggle or accordion display when using the shortcode</li>
<li>Can be displayed individually, or in FAQ groups by using the “group” taxonomy</li>
</ul>
<h4>Some of our Pro plugins</h4>
<ol>
<li>
<a href="https://www.tychesoftwares.com/store/premium-plugins/deposits-for-woocommerce/?utm_source=wprepo&utm_medium=link&utm_campaign=FAQPlugin" title="Deposits plugin for WooCommerce" rel="nofollow ugc">Deposits plugin for WooCommerce</a>
</li>
<li>
<a href="https://www.tychesoftwares.com/store/premium-plugins/order-delivery-date-for-woocommerce-pro-21/?utm_source=wprepo&utm_medium=otherprolink&utm_campaign=FAQPlugin" title="Order Delivery Date Pro for WooCommerce" rel="nofollow ugc">Order Delivery Date Pro for WooCommerce</a>
</li>
<li>
<a href="https://www.tychesoftwares.com/store/premium-plugins/woocommerce-abandoned-cart-pro/?utm_source=wprepo&utm_medium=link&utm_campaign=FAQPlugin" title="Abandoned Cart Pro for WooCommerce" rel="nofollow ugc">Abandoned Cart Pro for WooCommerce</a>
</li>
<li>
<a href="https://www.tychesoftwares.com/store/premium-plugins/woocommerce-booking-plugin/?utm_source=wprepo&utm_medium=link&utm_campaign=FAQPlugin" title="Booking & Appointment Plugin for WooCommerce" rel="nofollow ugc">Booking & Appointment Plugin for WooCommerce</a>
</li>
<li>
<a href="https://www.tychesoftwares.com/store/premium-plugins/product-delivery-date-pro-for-woocommerce/?utm_source=wprepo&utm_medium=link&utm_campaign=FAQPlugin" title="Product Delivery Date Pro for WooCommerce" rel="nofollow ugc">Product Delivery Date Pro for WooCommerce</a>
</li>
</ol>
<h4>Some of our other free plugins</h4>
<ol>
<li>
<a href="https://wordpress.org/plugins/order-delivery-date-for-woocommerce/" title="Order Delivery Date for WooCommerce - Lite" rel="ugc">Order Delivery Date for WooCommerce – Lite</a>
</li>
<li>
<a href="https://wordpress.org/plugins/woocommerce-abandoned-cart/" title="Abandoned Cart for WooCommerce" rel="ugc">Abandoned Cart for WooCommerce</a>
</li>
<li>
<a href="https://wordpress.org/plugins/product-delivery-date-for-woocommerce-lite/" title="Product Delivery Date for WooCommerce � Lite" rel="ugc">Product Delivery Date for WooCommerce – Lite</a>
</li>
<li>
<a href="https://wordpress.org/plugins/woocommerce-delivery-notes/" title="WooCommerce Print Invoice & Delivery Note" rel="ugc">WooCommerce Print Invoice & Delivery Note</a>
</li>
<li>
<a href="https://wordpress.org/plugins/order-delivery-date/" title="Order Delivery Date for WP e-Commerce" rel="ugc">Order Delivery Date for WP e-Commerce</a>
</li>
<li>
<a href="https://wordpress.org/plugins/woo-prevent-cancel-order/" title="Prevent Customers To Cancel WooCommerce Orders" rel="ugc">Prevent Customers To Cancel WooCommerce Orders</a>
</li>
<li>
<a href="https://wordpress.org/plugins/woo-coupons-by-categories-and-tags/" title="WooCommerce Coupons by Categories and Tags" rel="ugc">WooCommerce Coupons by Categories and Tags</a>
</li>
<li>
<a href="https://wordpress.org/plugins/arconix-shortcodes/" title="Arconix Shortcodes" rel="ugc">Arconix Shortcodes</a>
</li>
<li>
<a href="https://wordpress.org/plugins/arconix-flexslider/" title="Arconix Flexslider" rel="ugc">Arconix Flexslider</a>
</li>
<li>
<a href="https://wordpress.org/plugins/arconix-portfolio/" title="Arconix Portfolio" rel="ugc">Arconix Portfolio</a>
</li>
<li>
<a href="https://wordpress.org/plugins/arconix-testimonials/" title="Arconix Testimonials" rel="ugc">Arconix Testimonials</a>
</li>
<li>
<a href="https://wordpress.org/plugins/wp-export-menus/" title="Export WordPress Menus" rel="ugc">Export WordPress Menus</a>
</li>
</ol>

Arconix FAQ

Arconix FAQ provides an easy way to add FAQ items to your website.

Good Accordion vs Arconix FAQ