Accordion Item
The Accordion Item is a child rendering placed inside an Accordion container. Each item provides a collapsible panel with a heading trigger (button) and a body content area exposed via a placeholder. Items support an Always open parameter that prevents the panel from collapsing when another item opens, and a Title parameter that supplies the visible heading text.
The Accordion Item inherits heading-level parameters from the _Heading base template, allowing control over heading size, TOC visibility, and custom anchor/TOC titles. It also inherits the _Title template for the inline title text and the shared AdditionalClasses base for appending custom CSS classes.
Examples
Example Description
Below is a live Accordion with three Accordion Items. The first item has Always open checked, so it remains open independently of the other items. The second and third items follow the standard single-open behaviour controlled by the parent Accordion container.
Item 1 Content
This is the body content of Accordion Item #1. It has Always open = true, so it stays open even when other items are expanded. Use this setting for items that should always remain visible regardless of user interaction.
Item 2 Content
This is the body content of Accordion Item #2. It follows the default single-open behaviour inherited from the parent Accordion container. Clicking this item will collapse any other open item (except those marked Always open).
Item 3 Content
This is the body content of Accordion Item #3. Like Item #2, this follows the standard collapse behaviour. The Accordion Item placeholder supports any nested renderings — paragraphs, images, grids, etc.
Usage Notes
Usage Notes
- Accordion Items must be placed inside an Accordion container. They will not render correctly outside of one.
- The
Titleparameter is required — it provides the visible heading text displayed in the accordion button. - The
Always openparameter on an individual Accordion Item overrides the parent Accordion’s single-open behaviour for that item only. Even if the parent Accordion does not haveAlways openchecked, a child item withAlways open = truewill remain expanded independently. - The heading level is inherited from the parent Accordion via
Html.RenderHeading(Headings.Same). To adjust the heading element size, changeHeadingSizeon the Accordion Item or set it on the parent Accordion. - The body placeholder (
bs-section-{uid}-0) supports any child renderings including paragraphs, images, nested grids, and other components. - The
HideFromTOCparameter prevents the item heading from appearing in the page’s Table of Contents sidebar. - Use
AddClassto append custom CSS classes to the accordion-item wrapper element.
Control Properties
Control Properties
Standard Values / Defaults
The Accordion Item rendering parameters template ({E94537C0-9A5C-4D10-8631-1E212F9CD281}) inherits from _Title, _Heading, and AdditionalClasses. The __Standard Values item defines:
| Property | Default Value | Notes |
|---|---|---|
| Always open | (unchecked) | Item collapses when another sibling is opened, unless explicitly checked. |
| Title | (empty) | Must be provided per instance. Supplies the accordion button text. |
| HeadingSize | (not set) | Inherits from parent Accordion via Headings.Same. |
| HideFromTOC | 1 (checked) | Standard Values sets this to checked by default — accordion items are hidden from the page TOC. |
| HideTitleHeading | (unchecked) | Title heading is rendered by default. |
| TOCTitle | (empty) | Falls back to Title if the item is shown in the TOC. |
| HideFromJumpLinks | (unchecked) | Not excluded from jump links by default. |
| AddClass | (empty) | No extra CSS classes by default. |
| All other parameters | (empty / not set) | Inherited blank from base templates. |
Accordion Item Rendering Parameters
| Property | Type | Description |
|---|---|---|
| Title | Single-Line Text | The heading text displayed in the accordion button trigger. Required. |
| Always open | Checkbox | When checked, this item stays expanded independently regardless of the parent Accordion’s single-open setting. Overrides data-bs-parent for this item. |
| HeadingSize | Droplink (Dictionary Phrase) | Heading element size for the accordion item header. Inherits from the parent Accordion when not set. |
| HideFromTOC | Checkbox | When checked, excludes this item’s heading from the page Table of Contents. |
| HideTitleHeading | Checkbox | Hides the rendered heading element entirely (body content still renders). |
| TOCTitle | Single-Line Text | Alternative short title for the Table of Contents. Falls back to Title. |
| HideFromJumpLinks | Checkbox | Excludes the heading from jump-link navigation. |
| AddClass | Single-Line Text | Additional CSS classes appended to the accordion-item wrapper element. |
Parent Accordion Container Parameters (for reference)
| Property | Type | Description |
|---|---|---|
| Flush | Checkbox | Removes borders and rounded corners, rendering the accordion edge-to-edge within its parent container. |
| Always open | Checkbox | When checked on the parent, all child items stay open simultaneously (no auto-collapse). |
| AccordionStyle | Dictionary Phrase | Visual style class applied to accordion buttons (e.g. colour variant). Passed down to children via Html.PushRenderingData. |