Accordion is a stack of collapsed panels. Editors open one heading to read the body underneath. Use it for FAQs, grouped policies, and any list where the headings should stay visible while the bodies stay out of the way.
Use it when readers will scan titles and open one or two panels. Prefer Tabs when the items are parallel chapters of similar length that should feel like a switcher. Prefer Read More when there is a single block of copy to expand, not a list of headings.
Overview
APB-DOCS-COMP-ACCORDION
Accordion is a stack of collapsed panels. Editors open one heading to read the body underneath. Use it for FAQs, grouped policies, and any list where the headings should stay visible while the bodies stay out of the way.
Use it when readers will scan titles and open one or two panels. Prefer Tabs when the items are parallel chapters of similar length that should feel like a switcher. Prefer Read More when there is a single block of copy to expand, not a list of headings.
Adding the component
On the node edit form, open the Page Builder field. Click Add Accordion. Fill the Config row (color style, width, open first). Add Accordion items with a title (the header, required) and a body (the panel). Save the component, then save the page. The front end renders #apb-accordion-{id} with accordion-js. data-apb-open-first is 0 or 1.
Component configuration
Parent bundle apb_pb_accordion (Accordion). Shared fields (section title, placement, width, custom class, intro, container settings, access control) are documented once. Component-specific fields are listed in full from the live Field API dump dated 2026-09-03T03:15:34+00:00.
Container settings sections: padding, margin, border, background. Shared defaults and the validator regex are on Shared settings.
| Field | Label | Type | Required | Accepted values | Default | Notes |
|---|---|---|---|---|---|---|
field_apb_pb_container_settings | Container settings | text_long | no | — | empty | Shared. See Shared settings. |
field_apb_pb_container_bg_media | Background media | entity_reference | no | entity: media (image, video, remote_video) | empty | Shared. See Shared settings. |
field_apb_accordion_items | Accordion Items | entity_reference_revisions | no | entity: paragraph (apb_pi_accordion_item) | empty | — |
field_apb_pb_intro | Intro Text | text_long | no | — | empty | Shared. See Shared settings. |
field_apb_target_placement | Target Placement | entity_reference | yes | current_position</code>, <code>main_content_no_container</code>, <code>main_content_top</code>, <code>main_content_bottom</code>, <code>presentation_region</code>, <code>sidebar_top</code>, <code>sidebar_bottom</code>, <code>internal_placement_1</code>, <code>internal_placement_2</code>, <code>internal_placement_3 | [{"target_id":52}] | Shared. See Shared settings and Target placement. |
field_apb_color_style_02 | Color Style | entity_reference | yes | blue</code>, <code>blue_and_green</code>, <code>gray</code>, <code>green</code>, <code>orange</code>, <code>red</code>, <code>teal_blue</code>, <code>yellow_orange_and_red | [{"target_id":9}] | — |
field_apb_section_title | Section Title | string | no | — | empty | Shared. See Shared settings. |
field_apb_width_tx | Component Width | entity_reference | no | 25_</code>, <code>33_</code>, <code>40_</code>, <code>50_</code>, <code>60_</code>, <code>66_</code>, <code>70_</code>, <code>75_</code>, <code>80_</code>, <code>90_</code>, <code>100_ | [{"target_id":72}] | Shared. See Shared settings. |
field_apb_custom_class | Custom Class | string | no | — | empty | Shared. See Shared settings. |
field_apb_show_section_title | Show Section Title | list_string | yes | no=No</code>, <code>yes=Yes | [{"value":"no"}] | Shared. See Shared settings. |
field_apb_open_first | Open first item | boolean | no | — | [{"value":0}] | When enabled, the first accordion item starts expanded. Disabled by default (all items closed). |
field_access_control | Access Control | entity_access_by_role_field | no | — | [{"role_id":null,"access":"forbidden"}] | Shared. See Shared settings. |
Component items
APB Accordion Item apb_pi_accordion_item
field_apb_pi_desc is the Inline Entity Form autocomplete label. It is not rendered on the front end.
| Field | Label | Type | Required | Accepted values | Default | Notes |
|---|---|---|---|---|---|---|
field_apb_pi_body | Body | text_long | no | — | empty | — |
field_apb_pi_custom_class | Custom Class | string | no | — | empty | — |
field_apb_pi_title | Title | string | yes | — | empty | — |
status | Published | boolean | no | — | [{"value":true}] | — |
field_apb_pi_desc | Description (internal) | string | no | — | empty | — |
Examples
Live working examples are on the demo site. Open https://demo.apb.aero.net/components/accordion for configurations of this component. That page links back here as View documentation.
Shared layout options are not repeated in the video.
0:01 In this tutorial, we'll look at the Accordion component in APBuilder. This is the live example page. Shared settings like width and placement are documented separately; here we only change what is unique to Accordion.
0:17 The first band leaves Open first off. Every panel starts closed. Click a heading and accordion-js opens that panel.
0:28 The heading stays in the page flow. The body is the item field. Prefer Tabs when the items are parallel chapters; prefer Read More when there is a single block to expand.
0:42 Same component, different parent boolean. Open first is on, so the first panel is already open when the page loads. The attribute on the wrapper is data-apb-open-first equals one.
0:58 Color style CS02 is Teal on this parent. Eight short items still scan. The item title is the header; the item body is the panel.
1:10 Container settings are shared JSON: padding, radius, a dark background. They are not Accordion-specific. The panels inside still use the accordion color style.
1:25 Each example page ends with a link to the field-by-field reference on the documentation site. That is where the full parent and item tables live.
1:36 That is Accordion: a stack of collapsed panels, an open-first toggle, and ordinary container chrome. The editor walkthrough on the documentation site shows adding those fields from Gin.