Independent content disclosure with a native header button. Content stays instantiated while collapsed; disabled affects activation only. Related: cem-table · cem-sort-header · cem-paginator.
Full examples and variation matrix · Property playground · Automated stories
{slice @name=label | Details}{cem-field @label="label" @value="{$datadom.slices.label}" @slice=label @slice-event=input @slice-value="$target.value"}
{slice @name=class | }{cem-field @label="class" @value="{$datadom.slices.class}" @slice=class @slice-event=input @slice-value="$target.value"}
{slice @name=layout | content}{fieldset @role=group @aria-label="layout" @slice=layout @slice-event=change @slice-value="$target.value" | {legend | layout}{cem-radio @name=property-layout @value=content @label=content @checked={if datadom.slices.layout == "content" {true} else {null}}}{cem-radio @name=property-layout @value=panel @label=panel @checked={if datadom.slices.layout == "panel" {true} else {null}}}}
{slice @name=indicator | end}{fieldset @role=group @aria-label="indicator" @slice=indicator @slice-event=change @slice-value="$target.value" | {legend | indicator}{cem-radio @name=property-indicator @value=end @label=end @checked={if datadom.slices.indicator == "end" {true} else {null}}}{cem-radio @name=property-indicator @value=start @label=start @checked={if datadom.slices.indicator == "start" {true} else {null}}}}
{slice @name=notify-toggle | absent}{fieldset @role=group @aria-label="notify-toggle" @slice=notify-toggle @slice-event=change @slice-value="$target.value" | {legend | notify-toggle}{cem-radio @name=property-notify-toggle @value=absent @label=absent @checked={if datadom.slices.notify-toggle == "absent" {true} else {null}}}{cem-radio @name=property-notify-toggle @value=present @label=present @checked={if datadom.slices.notify-toggle == "present" {true} else {null}}}}
{slice @name=value | details}{cem-field @label=value @value={datadom.slices.value} @slice=value @slice-event=input @slice-value="$target.value"}
{slice @name=heading-level | 3}{fieldset @role=group @aria-label="heading-level" @slice=heading-level @slice-event=change @slice-value="$target.value" | {legend | heading-level}{cem-radio @name="property-heading-level" @value="3" @label="3" @checked={if datadom.slices.heading-level == "3" {true} else {null}}}{cem-radio @name="property-heading-level" @value="1" @label="1" @checked={if datadom.slices.heading-level == "1" {true} else {null}}}{cem-radio @name="property-heading-level" @value="2" @label="2" @checked={if datadom.slices.heading-level == "2" {true} else {null}}}{cem-radio @name="property-heading-level" @value="4" @label="4" @checked={if datadom.slices.heading-level == "4" {true} else {null}}}{cem-radio @name="property-heading-level" @value="5" @label="5" @checked={if datadom.slices.heading-level == "5" {true} else {null}}}{cem-radio @name="property-heading-level" @value="6" @label="6" @checked={if datadom.slices.heading-level == "6" {true} else {null}}}}
{slice @name=dir | ltr}{fieldset @role=group @aria-label="dir" @slice=dir @slice-event=change @slice-value="$target.value" | {legend | dir}{cem-radio @name="property-dir" @value="ltr" @label="ltr" @checked={if datadom.slices.dir == "ltr" {true} else {null}}}{cem-radio @name="property-dir" @value="rtl" @label="rtl" @checked={if datadom.slices.dir == "rtl" {true} else {null}}}}
{slice @name=expanded | absent}{fieldset @role=group @aria-label="expanded" @slice=expanded @slice-event=change @slice-value="$target.value" | {legend | expanded}{cem-radio @name="property-expanded" @value="absent" @label="absent" @checked={if datadom.slices.expanded == "absent" {true} else {null}}}{cem-radio @name="property-expanded" @value="present" @label="present" @checked={if datadom.slices.expanded == "present" {true} else {null}}}}
{slice @name=disabled | absent}{fieldset @role=group @aria-label="disabled" @slice=disabled @slice-event=change @slice-value="$target.value" | {legend | disabled}{cem-radio @name="property-disabled" @value="absent" @label="absent" @checked={if datadom.slices.disabled == "absent" {true} else {null}}}{cem-radio @name="property-disabled" @value="present" @label="present" @checked={if datadom.slices.disabled == "present" {true} else {null}}}}
{slice @name=region | absent}{fieldset @role=group @aria-label="region" @slice=region @slice-event=change @slice-value="$target.value" | {legend | region}{cem-radio @name="property-region" @value="absent" @label="absent" @checked={if datadom.slices.region == "absent" {true} else {null}}}{cem-radio @name="property-region" @value="present" @label="present" @checked={if datadom.slices.region == "present" {true} else {null}}}}
{slice @name=hidden | absent}{fieldset @role=group @aria-label="hidden" @slice=hidden @slice-event=change @slice-value="$target.value" | {legend | hidden}{cem-radio @name="property-hidden" @value="absent" @label="absent" @checked={if datadom.slices.hidden == "absent" {true} else {null}}}{cem-radio @name="property-hidden" @value="present" @label="present" @checked={if datadom.slices.hidden == "present" {true} else {null}}}}
{cem-expansion @layout={datadom.slices.layout} @indicator={datadom.slices.indicator} @value={datadom.slices.value} @notify-toggle={if datadom.slices.notify-toggle == "present" {true} else {null}} @label="{$datadom.slices.label}" @heading-level="{$datadom.slices.heading-level}" @class="{$datadom.slices.class}" @dir="{$datadom.slices.dir}" @expanded={if datadom.slices.expanded == "present" {true} else {null}} @disabled={if datadom.slices.disabled == "present" {true} else {null}} @region={if datadom.slices.region == "present" {true} else {null}} @hidden={if datadom.slices.hidden == "present" {true} else {null}} | {p | Persistent panel content.}{label | Note {input @value=Draft}}}{cem-module-url @slice=sourceUrl @src="@epa-wg/cem-components/components/cem-expansion/cem-expansion.xhtml"}{cem:if @test="datadom.slices.sourceUrl" | {p | {a @href="{$datadom.slices.sourceUrl}" | Open canonical XHTML}}{cem-demo-element @legend="Canonical source" @src="{$datadom.slices.sourceUrl}" @type=xml @demo=false}}