Advanced settings only experienced users should touch — caching, retry policies, telemetry verbosity.
Default values work for most use cases.
Expanded by default
Same markup with the expanded flag preset.
Call asExpanded() on the builder to start the section in the open state.
Dynamic toggle text
The toggle label flips between Show more / Show less — covers PF\u2019s three uncontrolled sections.
This content is revealed by the toggle, whose label flips between Show more and Show less.
Detached
pf-m-expand-top — the content sits above its toggle.
Build log details appear above the toggle that controls them.
Disclosure variation
pf-m-display-lg pf-m-limit-width.
The disclosure variation uses the large display size with a width limit.
Indented expandable content
pf-m-indented aligns content under the toggle text.
The content aligns under the toggle text instead of the icon (pf-m-indented).
With custom toggle content
Icon and badge composed inside the toggle text.
The toggle composes an icon and a badge alongside the text.
With heading semantics
The toggle nests inside a real h2 for the page outline.
The toggle sits inside a real heading element so the section lands in the page outline.
Truncate expansion
pf-m-truncate clamps the always-visible content until expanded; the toggle has no icon.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem.
Truncated text
A truncate-variant section whose collapsed state clips by characters (a 10ch Truncate) instead of by lines.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus.
Phasellus efficitur ante quis dolor viverra imperdiet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus.
Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla,
eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam,
tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus.
Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante
commodo tincidunt. Integer tincidunt at ipsum non aliquet.
Documentation
Expandable section props
Parameters accepted by
{#include components/data-display/expandable-section ... /}. Model mode: pass
section=<ExpandableSection> built in Java instead — the Java tab on each example
shows the builder.
*
required
Name
Type
Description
*id
String
DOM id.
*toggleText
String
Visible label on the toggle button. The chevron rotates on expand.
expanded
boolean
Initial state. Default false.
slot content
Qute block
Body content — hidden until expanded.
Usage
Vs. Accordion. Expandable section is a single, independent toggle.
Accordion coordinates multiple panels (often only one open at a time).
Initial state. Start collapsed by default — that's the whole point. Use
expanded=true only when there's an obvious reason (e.g. server detected a validation
error inside).
