Michael Burridge

<p><strong>FAQ Concertina</strong> is a plugin for WordPress that enables you to easily display a list of FAQs <em>(Frequently Asked Questions)</em> on your page or blog post in an attractive and presentable fashion.</p>
<p>This is achieved by using the following simple shortcode in your WordPress page or blog post:</p>
<pre><code>[faq-concertina]
</code></pre>
<p>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.</p>
<p>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.</p>
<p>With <strong>FAQ Concertina</strong> you can:</p>
<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>
<p>Although primarily intended for FAQs <strong>FAQ Concertina</strong> 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 <strong>FAQ Concertina</strong>!</p>
<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 <strong>FAQ Concertina</strong> is WAI-ARIA compliant. This means that <strong>FAQ Concertina</strong> 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>
<p>The <strong>FAQ Concertina</strong> 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:</p>
<p><a href="http://www.zyriab.co.uk/faqconc/" rel="nofollow ugc">http://www.zyriab.co.uk/faqconc/</a></p>
<p><a href="http://twitter.com/michaelburridge" rel="nofollow ugc">http://twitter.com/michaelburridge</a></p>


FAQ Concertina

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

Troy Templeman

<p>Accordion Block Lite adds an accessible and responsive Accordion block to the block editor inserter that can be added to display list items that expand and collapse to show and hide their associated sections of content.</p>
<p>Ideal for condensing longform or complex content, such as Frequently Asked Questions (FAQ). Also useful for reducing page scrolling.</p>
<p>Upgrade to Pro at <a href="https://troytempleman.com/wordpress/blocks/accordion-block/" rel="nofollow ugc">https://troytempleman.com/wordpress/blocks/accordion-block/</a>.</p>
<h4>Features</h4>
<ul>
<li>Accessible</li>
<li>Responsive</li>
<li>Inserter button for adding accordion items   </li>
<li>Settings
<ul>
<li>Block alignment</li>
<li>Text alignment</li>
<li>Text formatting</li>
<li>Header element</li>
<li>Header icon <strong>[Pro]</strong> </li>
<li>Header icon position <strong>[Pro]</strong> </li>
</ul>
</li>
<li>Styles
<ul>
<li>Color
<ul>
<li>Text</li>
<li>Background</li>
<li>Link</li>
<li>Header text <strong>[Pro]</strong> </li>
<li>Header text hover <strong>[Pro]</strong> </li>
<li>Header text active <strong>[Pro]</strong> </li>
<li>Header icon <strong>[Pro]</strong> </li>
<li>Header icon hover <strong>[Pro]</strong> </li>
<li>Header icon active <strong>[Pro]</strong> </li>
<li>Header background <strong>[Pro]</strong> </li>
<li>Header background hover <strong>[Pro]</strong> </li>
<li>Header background active <strong>[Pro]</strong> </li>
<li>Panel text <strong>[Pro]</strong> </li>
<li>Panel background <strong>[Pro]</strong> </li>
</ul>
</li>
<li>Typography
<ul>
<li>Font family</li>
<li>Font size</li>
<li>Appearance</li>
<li>Line height</li>
<li>Letter spacing</li>
<li>Text decoration</li>
<li>Letter case</li>
</ul>
</li>
<li>Dimensions
<ul>
<li>Padding</li>
<li>Margin</li>
<li>Item padding <strong>[Pro]</strong> </li>
<li>Item margin <strong>[Pro]</strong> </li>
<li>Header icon width <strong>[Pro]</strong> </li>
<li>Header padding <strong>[Pro]</strong> </li>
<li>Header margin <strong>[Pro]</strong> </li>
<li>Panel padding <strong>[Pro]</strong> </li>
<li>Panel margin <strong>[Pro]</strong> </li>
</ul>
</li>
<li>Border
<ul>
<li>Item border <strong>[Pro]</strong> </li>
<li>Item border radius <strong>[Pro]</strong> </li>
<li>Header border <strong>[Pro]</strong> </li>
<li>Header border hover <strong>[Pro]</strong> </li>
<li>Header border active <strong>[Pro]</strong> </li>
<li>Header border radius <strong>[Pro]</strong> </li>
<li>Panel border <strong>[Pro]</strong> </li>
<li>Panel border radius <strong>[Pro]</strong></li>
</ul>
</li>
</ul>
</li>
<li>Variations <strong>[Pro]</strong>
<ul>
<li>Lines <strong>[Pro]</strong> </li>
<li>Blocks <strong>[Pro]</strong>  </li>
</ul>
</li>
</ul>
<h4>Demo</h4>
<p><a href="https://troytempleman.com/wordpress/blocks/accordion-block/" rel="nofollow ugc">https://troytempleman.com/wordpress/blocks/accordion-block/</a></p>
<h4>HTML</h4>
<p>Accordion Block Lite will output an Accordion block with the following HTML structure:</p>
<pre><code><ul class="wp-block-tt-accordion ">
    <li class="wp-block-tt-accordion-item wp-block-tt-accordion-item-1">
        <p class="wp-block-tt-accordion-item-header">
            <button class="wp-block-tt-accordion-item-header-button" id="wp-block-tt-accordion-item-header-button-9515cb6e-8464-424b-a277-3102bd5202cf" type="button" aria-expanded="false" aria-controls="wp-block-tt-accordion-item-panel-9515cb6e-8464-424b-a277-3102bd5202cf">
                <span class="wp-block-tt-accordion-item-header-button-text">Title</span>
                <span class="wp-block-tt-accordion-item-header-button-icon-arrow" aria-hidden="true">
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                        <polyline points="4.711,8 12,15.289 19.289,8" stroke="black" stroke-width="2" fill="none"></polyline>
                    </svg>
                </span>
            </button>
        </p>
        <div class="wp-block-tt-accordion-item-panel" id="wp-block-tt-accordion-item-panel-9515cb6e-8464-424b-a277-3102bd5202cf" role="region" aria-labelledby="wp-block-tt-accordion-item-header-button-9515cb6e-8464-424b-a277-3102bd5202cf" hidden="">
            <p>Panel</p>
        </div>
    </li>
</ul>
</code></pre>
<h3>Support</h3>
<p>If you need help with Accordion Block Lite, please submit a ticket on the <a href="https://wordpress.org/support/plugin/accordion-block-lite" rel="ugc">Support</a> forum.</p>
<h3>Donate</h3>
<p>If you like Accordion Block Lite and would like to support it’s future development, how about <a href="https://www.buymeacoffee.com/troytempleman" rel="nofollow ugc">buying me a coffee</a>?</p>
<h3>Contribute</h3>
<p>If you would like to contribute to the development of Accordion Block Lite, the repository is located on <a href="https://github.com/troytempleman/accordion-block-lite" rel="nofollow ugc">GitHub</a>.</p>
<h3>License</h3>
<p>Accordion Block Lite is released under the <a href="https://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">GNU General Public License, version 2 (GPLv2)</a>.</p>
<h3>Requirements</h3>
<ul>
<li>WordPress 6.0 or greater</li>
<li>PHP version 7.4 or greater</li>
<li>MySQL version 5.7 or greater or MariaDB version 10.3 or greater.</li>
</ul>
<h3>Credits</h3>
<ul>
<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/" rel="nofollow ugc">W3C Accordion (Sections With Show/Hide Functionality)</a></li>
<li><a href="https://www.aditus.io/patterns/accordion/" rel="nofollow ugc">Accessible Accordion</a></li>
<li><a href="https://inclusive-components.design/collapsible-sections/" rel="nofollow ugc">Collapsible Sections</a></li>
<li><a href="https://www.hassellinclusion.com/blog/accessible-accordion-pattern/" rel="nofollow ugc">My favourite accessible accordion pattern</a></li>
<li><a href="https://www.a11ywithlindsey.com/blog/javascript-accessibility-accordions" rel="nofollow ugc">JavaScript and Accessibility: Accordions</a></li>
<li><a href="https://www.youtube.com/watch?v=ZjYgdf6RKPU" rel="nofollow ugc">Creating an Accordion Block that uses the InnerBlock component</a></li>
</ul>


Accordion Block Lite

A block that displays list items that expand and collapse to show and hide their associated sections of content.

FAQ Concertina vs Accordion Block Lite