Accordion

An Accordion is a stack of panels. Each panel shows only its title until the visitor clicks it; the body then unfolds below the title and folds back when clicked again. Use it for FAQs, step lists, terms and conditions, or any long content that is easier to scan when grouped under headings.

What it is for

Accordions keep a page short without hiding information: visitors see every heading at once and open only the panels they care about. Typical uses are questions and answers, program descriptions grouped by day, or a list of services where each service has a paragraph of detail.

See it live on the example page APB Accordion.

Structure

An Accordion component has two levels:

• The Accordion itself — the card you add to the Page Builder. It carries the shared settings (section title, intro, width, placement, color, container) and the list of panels.
• Accordion Items — one per panel. Each item has a title (always visible) and a body (visible when open). Items are created inside the Accordion card and can be reordered by dragging.

The panels render in the order of the items table. Only one accordion is needed per group of panels; add a second Accordion component when you want a second heading and intro.

Component settings

Settings shared with every component are documented in APB Basics; the table lists them briefly and explains the Accordion-specific ones.

Setting	Options	Default	What it does
Section Title / Show Section Title	text; No / Yes	— / No	Heading above the panels. See Section Title and Intro Text.
Intro Text	rich text	empty	Optional paragraph between the heading and the first panel.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebar Top/Bottom, Internal Placement 1–3	Body	Where the accordion appears. See Target Placement.
Color Style	Blue, Blue and Green, Gray, Green, Orange, Red, Teal Blue, Yellow	Blue	Color of the panel titles and their open/closed indicator. This component uses the second palette (see Color Style).
Component Width	25% … 100%	100%	Width of the accordion inside the content area, centered when below 100%. See Component Width.
Open first item	on / off	off	When on, the first panel is already open when the page loads. Leave it off for FAQs; turn it on when the first panel is the one most visitors want.
Custom Class	text	empty	For designers. See Advanced settings.
Access Control	roles	everyone	Restrict who sees the accordion. See Advanced settings.
Container Settings	padding, margins, border, background, media	32px bottom margin	The box around the accordion. See Container Settings.

Accordion Item fields

Field	Required	What it does
Title	yes	The text of the panel header. Keep it to one line; it is also what visitors click.
Body	no	Rich text shown when the panel is open: paragraphs, lists, links, images.
Description (internal)	no	A note for editors only. It appears in the Add existing search so you can tell apart items with the same title; it is never shown on the site.
Custom Class	no	Extra CSS class on this panel, for designers.

How to use it

1. In the Page Builder, click Add Accordion.
2. Type a Section Title (for example “Frequently asked questions”) and set Show Section Title to Yes if it should appear on the page.
3. Optionally write an Intro Text.
4. Click Add new Accordion Item, type the Title and the Body, then click Create Accordion Item. Repeat for every panel.
5. Drag the items into the order you want.
6. Pick a Color Style that matches the page and, if the accordion should not span the whole content area, a Component Width.
7. Save the page and check that the panels open and close.

Tips

• Visitors can open several panels at once; opening one does not close the others.
• An accordion with a single item works but looks odd — use Read More for one collapsible block of text.
• Panel bodies accept any rich text, including images and tables, but avoid putting another interactive component inside a panel.
• To place an accordion next to text, build a Simple Content with a Region item and point the accordion’s Target Placement at it.

For site builders

Item	Value
Module	apb_pb_accordion
Paragraph types	apb_pb_accordion (component), apb_pi_accordion_item (panel)
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, Entity Access by Role Field, core Options / Taxonomy / Text
Shared vocabularies used	apb_tax_cs_02 (Color Style), apb_tax_width, apb_tax_target_placement
Front-end	Library apb_pb_accordion/accordion (accordion-js, bundled) on top of apbuilder/aero-page-builder-core; per-instance colors are injected as inline CSS.
Permissions	Install grants view on both bundles to anonymous and authenticated users and the create/update/delete grants to the editor roles.
Container settings	Full profile (padding, margin, border, background, media, parallax).
Example page	/apbuilder_examples/apb-accordion