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.

Michael Burridge

FAQ Concertina is a plugin for WordPress that enables you to easily display a list of FAQs (Frequently Asked Questions) on your page or blog post in an attractive and presentable fashion.
This is achieved by using the following simple shortcode in your WordPress page or blog post:
<pre><code>[faq-concertina]
</code></pre>
When the list of FAQs appears on your page the answers are initially hidden with only the questions visible. This makes efficient use of the space available on the page and avoids large tracts of text which can be difficult for the reader to take in, especially on small screen devices such as smartphones.
The answer can be made to appear as an expandable section, concertina-style, by clicking on the question. The answer can be hidden again by clicking anywhere on either the question or answer.
With FAQ Concertina you can:
<ul>
<li>have any number of FAQs,</li>
<li>define the order in which the FAQs appear on the page,</li>
<li>determine whether or not more than one answer can be visible at any one time,</li>
<li>categorise FAQs so that FAQs from different categories can appear in separate lists, either on the same page or on separate pages,</li>
<li>customise the appearance of the FAQ listing to fit in with the style of your theme.</li>
</ul>
Although primarily intended for FAQs FAQ Concertina is, of course, not limited to just FAQs and can be used for any content with a heading where the content is initially hidden and can be expanded by clicking on the heading. Feel free to use your imagination to come up with all kinds of creative uses for FAQ Concertina!
<h4>WHAT’S NEW?</h4>
<ul>
<li>As of version 1.4.8 FAQs can now display a featured image (also known as post thumbnail)</li>
<li>As of version 1.4.6 FAQs support post revisions.</li>
<li>As of version 1.4.0 FAQ Concertina is WAI-ARIA compliant. This means that FAQ Concertina is fully accessible and compatible with screen readers and other assistive technologies. Thanks to Tim Kaye <a href="https://profiles.wordpress.org/kts915" rel="nofollow ugc">@kts915</a> for contributing JavaScript code to make this possible.</li>
</ul>
The FAQ Concertina download includes a fully illustrated 20 page manual in <code>.pdf</code> format to help you get the most from the plugin. The manual can also be downloaded from the website:
<a href="http://www.zyriab.co.uk/faqconc/" rel="nofollow ugc">http://www.zyriab.co.uk/faqconc/</a>
<a href="http://twitter.com/michaelburridge" rel="nofollow ugc">http://twitter.com/michaelburridge</a>

FAQ Concertina

Display FAQs in an expandable concertina or accordion section. FAQs can be ordered and categorised, and their appearance can be customised.

Good Accordion vs FAQ Concertina