# Disclosure ## Basic example Disclosures are built using the `Disclosure`, `DisclosureButton`, and `DisclosurePanel` components. Clicking the `DisclosureButton` will automatically open/close the `DisclosurePanel`, and all components will receive the appropriate `aria-*` attributes like `aria-expanded` and `aria-controls`. ```svelte Is team pricing available? Yes! You can purchase a license that you can share with your entire team. ``` ## Styling [See here](general-concepts#component-styling) for some general notes on styling the components in this library. ### Open panels `Disclosure` and its related components expose a slot prop containing the `open` state of the panel. You can use this to apply whatever styles you wish. ```svelte Is team pricing available? Yes! You can purchase a license that you can share with your entire team. ``` ## Showing/hiding the panel By default, your `DisclosurePanel` will be shown/hidden automatically based on the internal open state tracked within the `Disclosure` component itself. If you'd rather handle this yourself (perhaps because you need to add an extra wrapper element for one reason or another), you can add a `static` prop to the `DisclosurePanel` component to tell it to always render, and use the `open` slot prop to show or hide the panel yourself. ```svelte Is team pricing available? {#if open}
Yes! You can purchase a license that you can share with your entire team.
{/if}
``` ## Closing disclosures manually To close a disclosure manually when clicking a child of its panel, render that child as a `DisclosureButton`. You can use the `as` prop to customize which element is being rendered. ```svelte Open mobile menu Home ``` This is especially useful when using disclosures for things like mobile menus that contain links, where you want the disclosure to close when navigating to the next page. Alternatively, `Disclosure` and `DisclosurePanel` expose a `close()` slot prop which you can use to imperatively close the panel: ```svelte Solutions ``` By default the `DisclosureButton` receives focus after calling `close()`, but you can change this by passing an element into `close(el)`. ## Transitions To animate the opening and closing of the disclosure panel, you can use [this library's Transition component](/docs/latest/transition) or Svelte's built-in transition engine. See that page for a comparison. ### Using the `Transition` component To use the `Transition` component, all you need to do is wrap the `DisclosurePanel` in a `` and the panel will transition automatically. ```svelte Is team pricing available? ``` The components in this library communicate with each other, so the Transition will be managed automatically when the Listbox is opened/closed. If you require more control over this behavior, you may use a more explicit version: ```svelte Is team pricing available? ``` ### Using Svelte transitions The last example above also provides a blueprint for using Svelte transitions: ```svelte Is team pricing available? {#if open}
{/if}
``` Make sure to use the `static` prop, or else the exit transitions won't work correctly. ## Accessibility notes ### Mouse interaction Clicking a `DisclosureButton` toggles the disclosure's panel open and closed. ### Keyboard interaction | Command | Description | | ---------------------------------------------------------- | ------------- | | `` / `` when a `DisclosureButton` is focused | Toggles panel | ### Other All relevant ARIA attributes are automatically managed. For a full reference on all accessibility features implemented in `Disclosure`, see the ARIA spec on Disclosure. ## Component API ### Disclosure The main disclosure component. | Prop | Default | Type | Description | | ------------- | ------- | --------- | -------------------------------------------------- | | `as` | `div` | `string` | The element the `Disclosure` should render as | | `defaultOpen` | `false` | `boolean` | Whether the `Disclosure` should be open by default | | Slot prop | Type | Description | | --------- | ---------------------------- | ----------------------------------------------------------------------------------- | | `open` | `boolean` | Whether the disclosure is open | | `close` | `(el?: HTMLElement) => void` | Closes the disclosure and focuses `el`, if passed, or the `DisclosureButton` if not | ### DisclosureButton This is the trigger button to toggle a disclosure. You can also use this `DisclosureButton` component inside a `DisclosurePanel`. If you do, it will behave as a close button and have the appropriate `aria-*` attributes. | Prop | Default | Type | Description | | ---- | -------- | -------- | --------------------------------------------------- | | `as` | `button` | `string` | The element the `DisclosureButton` should render as | | Slot prop | Type | Description | | --------- | --------- | ------------------------------------- | | `open` | `boolean` | Whether or not the disclosure is open | ### DisclosurePanel This component contains the contents of your disclosure. | Prop | Default | Type | Description | | --------- | ------- | --------- | ----------------------------------------------------------------------------------------------- | | `as` | `div` | `string` | The element the `DisclosurePanel` should render as | | `static` | `false` | `boolean` | Whether the element should ignore the internally managed open/closed state | | `unmount` | `true` | `boolean` | Whether the element should be unmounted, instead of just hidden, based on the open/closed state | Note that `static` and `unmount` cannot be used together. | Slot prop | Type | Description | | --------- | ---------------------------- | ----------------------------------------------------------------------------------- | | `open` | `boolean` | Whether or not the disclosure is open | | `close` | `(el?: HTMLElement) => void` | Closes the disclosure and focuses `el`, if passed, or the `DisclosureButton` if not |