WPThumbs
Themes Plugins By purpose By industry Best-of lists Fix it guides
Free Plugin by Troy Templeman v0.1.2

Accordion Block Lite

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

Accordion Block Lite

The facts

Active installs
400+
Price
Free
Last updated
24 Sep 2024
Added
Feb 2024
Requires WP
6.0
Tested up to
WP 6.6.7
Requires PHP
7.0
Downloads
5,100

Our analysis

AI-assisted

Accordion Block Lite is a WordPress plugin that adds an Accordion block to the block editor. This block allows you to display list items that can expand and collapse, making it suitable for condensing longform or complex content, such as FAQs.

The plugin is designed to be accessible and responsive, providing an easy way to manage content visibility without excessive scrolling. It is aimed at users who want to enhance their content presentation in a straightforward manner.

Best for: This plugin is suitable for website owners looking to present content clearly and efficiently.

What it does well

  • ✓Accessible and responsive design
  • ✓Ideal for FAQs and complex content
  • ✓Easy integration into the block editor

Where it falls short

  • •Limited features in the free version
  • •Some advanced options require a Pro upgrade

Verdict

Accordion Block Lite offers a basic solution for creating accordion-style content sections. While it provides essential functionality, users may need to consider the Pro version for more advanced features.

From the developer

Troy Templeman's own description of Accordion Block Lite, lightly tidied.

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.

Ideal for condensing longform or complex content, such as Frequently Asked Questions (FAQ). Also useful for reducing page scrolling.

Upgrade to Pro at https://troytempleman.com/wordpress/blocks/accordion-block/.

Features

  • Accessible
  • Responsive
  • Inserter button for adding accordion items
  • Settings
    • Block alignment
    • Text alignment
    • Text formatting
    • Header element
    • Header icon [Pro]
    • Header icon position [Pro]
    • Color
      • Text
      • Background
      • Link
      • Header text [Pro]
      • Header text hover [Pro]
      • Header text active [Pro]
      • Header icon [Pro]
      • Header icon hover [Pro]
      • Header icon active [Pro]
      • Header background [Pro]
      • Header background hover [Pro]
      • Header background active [Pro]
      • Panel text [Pro]
      • Panel background [Pro]
      • Font family
      • Font size
      • Appearance
      • Line height
      • Letter spacing
      • Text decoration
      • Letter case
      • Padding
      • Margin
      • Item padding [Pro]
      • Item margin [Pro]
      • Header icon width [Pro]
      • Header padding [Pro]
      • Header margin [Pro]
      • Panel padding [Pro]
      • Panel margin [Pro]
      • Item border [Pro]
      • Item border radius [Pro]
      • Header border [Pro]
      • Header border hover [Pro]
      • Header border active [Pro]
      • Header border radius [Pro]
      • Panel border [Pro]
      • Panel border radius [Pro]
      • Lines [Pro]
      • Blocks [Pro]

      Demo

      https://troytempleman.com/wordpress/blocks/accordion-block/

      HTML

      Accordion Block Lite will output an Accordion block with the following HTML structure:

      <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>

      Support

      Read the full description on the official page →

Tagged as

platform Gutenberg & Block Editor
topic Accordion Accessible Section Hide Show Header Headers Background Hover