web_accordion Shortcode
The web_accordion shortcode groups expandable web_accordion_content panels into one disclosure interface. It can permit several open panels or close the previous panel whenever another opens.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Allowed child shortcodes: web_accordion_content.
Usage
[web_accordion]
Content
[/web_accordion]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
accordion_style |
accordion_dark |
accordion_light, accordion_dark |
Applies the light or dark heading treatment. |
one_at_a_time |
— | yes or empty |
Uses single-panel mode when enabled; otherwise visitors may leave several panels open. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_id |
— | Valid unique HTML ID | Enter element ID (Note: make sure it is unique and valid according to w3c specification). |
el_class |
— | String unless stated otherwise | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
Enclosed content
Only web_accordion_content belongs directly inside the container. Each child owns its heading, open-by-default state and labelled panel body; this parent supplies the multi-panel policy. Accordion headings are disclosure controls, not tabs.
In single-panel mode, the first initially open panel takes precedence. Nested accordions have independent opening rules. Enter and Space toggle a focused heading; Up/Down and Home/End move between headings in the same accordion.
Both this shortcode and the POM Gutenberg Accordion use the existing conditional Accordion stylesheet and Collapse scripts. Disabling the Page Builder administration interface does not disable public shortcode rendering.
Verification
Open and close every heading with pointer and keyboard input. In single-panel mode, verify opening one closes the previous panel; in multi-panel mode, verify independent panels remain open and all hidden content becomes reachable.