# Collapsible Panel The collapsible panel is a container that can show or hide additional content. It utilizes progressive disclosure by providing the option to hide content/controls until the user needs them. ```html

Use the default collapsible panel in most situations. The default panel type has a border.

For all the panel types, you can turn the summary off if you don't need it, add additional action buttons beside the expand/collapse arrow, and add HTML content under the header. See the other collapsible panel types below for examples of those options!

Nickname: caketray

Use the subtle collapsible panel on backgrounds that are not white. The subtle collapsible panel has a shadow instead of a border, making it stand out more on darker backgrounds.

This panel also has some HTML content in the header (including some information about our collapsible panel’s nickname, caketray).

Use an inline collapsible panel to progressively disclose sections of a complex page, or to allow users to simplify a complex page by hiding entire sections. The inline collapsible panel has only a top and bottom border, and the line between the header and summary is removed.

This panel also has an additional action (the menu). You can add more actions in that slot if you need them.

``` ## Best Practices * Use to progressively disclose information or settings to simplify a complex workflow * Keep the header consistent across the collapsed and expanded states of the panel * Use the subtle collapsible panel for backgrounds that aren't white * Use [`d2l-collapsible-panel-group`](#d2l-collapsible-panel-group) to group multiple panels for better visual consistency * Don't nest collapsible panels * Don't put required fields in a collapsible panel * Avoid long lists of collapsible panels. Consider using the nested [list](https://daylight.d2l.dev/components/list/) in this case (exceptions may apply) ## Collapsible Panel [d2l-collapsible-panel] The `d2l-collapsible-panel` element is a container that provides specific layout slots such as `before`, `header`, `summary`, `actions`, and a default slot for the expanded content. ```html The collapsible panel is also nicknamed caketray! Team Polaris coined this nickname back in 2020 while creating a labs component for a tool called Learning Paths (which is now replaced with the collapsible panel). They wanted to distinguish this labs component from d2l-card, but they didn't know what to call it, so they named it caketray to serve as a reminder to change the name later. Caketray caught on around the company, so much so that we had to make it an official nickname so some teams could find it! You'll see some other cake-related examples throughout this documentation to pay tribute to the collapsible panel's heritage. ``` ### Slots | Slot | Type | Description | |--|--|--| | `before` | optional | Slot for content to be placed at the left side of the header, aligned with the title and header slot | | `header` | optional | Supporting header content | | `actions` | optional | Buttons and dropdown openers to be placed in top right corner of header | | `summary` | optional | Summary of the expanded content. Only accepts `d2l-collapsible-panel-summary-item` | | `default` | required | Content that is rendered when the panel is expanded | ### Properties | Property | Type | Description | |--|--|--| | `expanded` | Boolean | Whether or not the panel is expanded | | `expand-collapse-label` | String | Label describing the contents of the header for screen reader users | | `heading-style` | Number | The heading style to use | | `heading-level` | Number | Semantic heading level (h1-h4) | | `no-sticky` | Boolean | Disables sticky positioning for the header | | `padding-type` | String | Optionally set horizontal padding of inline panels | | `panel-title` | String | The title of the panel | | `skeleton` | Boolean | Renders the panel title and the expand/collapse icon as skeleton loaders | | `type` | String | The type of collapsible panel | ### Events | Event | Description | |--|--| | `d2l-collapsible-panel-expand` | Dispatched when the panel is expanded | | `d2l-collapsible-panel-collapse` | Dispatched when the panel is collapsed | ### Panel Types #### Default Use the default collapsible panel in most situations. ```html Expanded content ``` #### Subtle Use the subtle collapsible panel on backgrounds that are not white. ```html Expanded content ``` #### Inline Use an inline collapsible panel to progressively disclose sections of a complex page, or to allow users to simplify a complex page by hiding entire sections. The inline collapsible panel has only a top and bottom border, and the line between the header and summary is removed. ```html Expanded content ``` ## Summary Items [d2l-collapsible-panel-summary-item] An optional summary can help the user understand what’s inside the collapsible panel without having to expand it. This can be helpful if the user needs more than the heading to explain what’s inside. ```html ``` More than one `d2l-collapsible-panel-summary-item` can be added to the `summary` slot, and each will appear on its own line. ```html

Expanded content ``` ## Header and Actions Slots Collapsible panels have two optional slots, `header` and `actions` that can be used to add more information to the header area. ```html

Submitted On: Jul 20, 2021 - 2:23 PM

Link to post

Sweet roll candy dessert caramels shortbread gummies toffee oat cake cookie. Wafer gummies shortbread sweet halvah jujubes sweet. Cake chocolate chocolate bar carrot cake marzipan. Icing chupa chups jujubes macaroon toffee chocolate bar wafer croissant.

Toffee pastry chupa chups lollipop carrot cake chocolate cake sweet roll sweet roll. Marzipan pudding candy canes jelly lemon drops oat cake ice cream. Wafer danish pudding marzipan chupa chups jelly beans brownie.

Pastry apple pie biscuit sesame snaps sweet pie apple pie dessert jelly beans. Lemon drops croissant tootsie roll croissant oat cake. Macaroon toffee pie gummi bears cupcake wafer tiramisu.

Chocolate cake ice cream cake chocolate bar dessert. Donut tiramisu fruitcake tiramisu liquorice shortbread sugar plum macaroon caramels. Tart candy cookie ice cream dessert tootsie roll.

``` ## Group of Panels [d2l-collapsible-panel-group] Use the `d2l-collapsible-panel-group` component to automatically handle spacing and layout for multiple panels. ```html

``` ## Accessibility The `d2l-collapsible-panel` component adheres to [W3C's Disclosure Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) and any components added to any of the slots should also adhere to its respective pattern. ### Panel label By default, the panel is described by screen readers with the `panel-title` attribute. There may be situations where the screen reader should read additional information. In this case, a special label can be specified using the `expand-collapse-label` property. ### Keyboard behaviour On focus, a focus ring (blue border) goes around the clickable area of the component. When collapsed, this area is the entire panel; when expanded, it's only the header. When focused, users can expand or collapse the panel using the `Enter` or `Space` key. Any focusable actions placed in the `actions` slot will receive focus after the panel recevies focus. The open/close icon beside the `actions` slot looks like a button, but is an indicator of component state. It will not receive focus like a typical button.