Disclosure

A section that the user expands and collapses, such as a question of an FAQ.

<script>
  import Button from '@brumate/ui/Button.brm';
  import Disclosure from '@brumate/ui/Disclosure.brm';
  import DisclosurePanel from '@brumate/ui/DisclosurePanel.brm';
  import Heading from '@brumate/ui/Heading.brm';
  import Icon from '../../src/components/Icon.brm';
</script>

<div class="ui-accordion">
<Disclosure class="ui-disclosure">
  <Heading level=(2)>
    <Button slot="trigger" class="ui-disclosure-trigger">
      Shipping
      <Icon name="chevron" />
    </Button>
  </Heading>
  <DisclosurePanel transition class="ui-disclosure-panel">
    <p>Orders leave the shop in two days.</p>
  </DisclosurePanel>
</Disclosure>
</div>

• A Disclosure holds a Button with slot="trigger", often in a Heading, and a DisclosurePanel.
• The trigger gets aria-expanded and aria-controls. The panel is a group that the trigger names.
• isExpanded is the state. See State.
• While it is collapsed, the panel is hidden="until-found", so find in page reaches its text and opens it. A browser without until-found hides it as hidden does.
• The element shows data-expanded and data-disabled. The panel shows data-expanded.
• A DisclosureGroup opens several of them one at a time.

Animating the panel

transition on the DisclosurePanel lets CSS animate it. The demo above uses it.

• The panel shows data-closed, data-enter and data-leave, as a Transition does, and waits for its animations before it hides.
• It is inert while it leaves.
• --disclosure-panel-height holds the height of its content while it moves, from nothing to its height and back, so CSS can animate the height:

.panel {
  height: var(--disclosure-panel-height, auto);
  overflow: clip;
  transition: height 0.25s;
}

• A TransitionChild inside the panel enters after it, and the panel leaves after it.
• Without transition, the panel opens and closes at once, with none of these.

Keeping the content

unmount on the DisclosurePanel decides what happens to the content while the panel is collapsed:

With true and 'offscreen', a panel that starts collapsed has no content in the page that the server sends, so find in page and search engines do not reach it. Keep the default for text that people search for.