Accordion Block
The Accordions Block allows users to create collapsible content sections. This block commonly used for FAQs, feature lists, and structured content
Features
Fully customizable styling
Expand/collapse functionality
Multiple accordions in a single block
Option to keep one or multiple items open
Smooth animation effects
Compatible with all themes
Mobile-responsive
Block toolbar
Each block has its own block-specific controls that allow you to manipulate the block right in the editor. If you hover over the buttons, tooltips will tell you what is behind the buttons, and also show you keyboard shortcuts when available.
The block toolbar for the accordion block shows these buttons:
Transform to
Block-moving tools
Change alignment
Change text alignment
Bold and Italics
Insert links
More rich text controls
Options
Transform to
The Transform to button lets you convert the Accordion block into Columns, Details, and Group.
Block-moving tools
Use the block-moving tools to move the Accordion block.
The drag or six dots icon allows you to freely reposition the block anywhere within the editor by holding the icon and dragging it to the new location.
You can also use the arrow icons to move the block up or down within the group of nested blocks or when there are multiple blocks.
Change text alignment
Block toolbar with the drop-down for alignment.
Use the Change text alignment tool to modify the alignment of the Accordion block. Select the icon to display the alignment dropdown menu. You can align the text to the left, make it center-aligned, or orient it to the right.
Bold and italics
The Bold and Italics formatting options are used to customize the text in the Accordion block. You can also use keyboard shortcuts to enable these text formatting:
Ctrl + B or Command + B to bold the text.
Ctrl + I or Command + I to italicize the text.
Insert links
The Insert links tool lets you add a hyperlink to the selected text.
More rich text options
Examples of the location of the “Rich Text Editing” menu in an Accordion block.
The drop-down menu to the left of the More options menu contains a range of additional rich text editing options such as highlighting, inline code, strikethrough, and more.
More options
Example of the location of the “More Options” menu in an Accordion block.
The More Options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate, remove, or edit your block as HTML.
Block Setting
WordPress blocks have specific configuration options in the block settings panel. To access the Accordion block settings panel, click the Settings button at the top-right corner of the editor. Here is a list of the Accordion block settings options:
Title Color settings
You can set block title text color and background color by this setting.
Content Color settings
You can set block content text color and background color by this setting.
Typography
The Typography settings enable you to customize the font and text appearance of the content within the Accordion block. The settings have various options, such as font size, font style, font family, and letter spacing.
Dimensions
The accordion block provides various options to adjust its dimensions, such as width and height, allowing you to customize the text layout to ensure visual consistency.
Advanced
The Advanced tab lets you add CSS class(es) to your block.
The Advanced settings let you add CSS class(es) to the Group block.
The Additional CSS class(es) enables you to write custom CSS class(es) to the Group block, so you can style the block as you see fit.