Drawers are collapsible containers – visitors can click to show or hide the contents of a drawer. They’re often used for presenting content such as FAQs, where details can be hidden until activated.
Use Drawers With Caution. It’s important to note that even if you use a drawer to make page content appear shorter, all of the content inside the drawer still has to load in order for the page to be displayed. (If you include a megabyte of text and a collection of images inside a drawer, it may take some time.) Also, while the drawers have been tested to ensure accessibility, they don’t offer an ideal experience for screen reader users.
Open and Closed Drawers
Drawers are a good choice for hiding content that will only be viewed intermittently. You can use the open attribute to have a drawer be open by default.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida dignissim porta. Etiam sollicitudin mattis erat, vitae volutpat risus dictum et. Praesent nisi dolor, suscipit sed enim non, tincidunt auctor ex. Phasellus tempus augue dolor, ut porta justo ultrices pellentesque. Nam ut ante vitae nisl mollis aliquam. Nullam nec dolor sapien. Vestibulum tempor sapien non pretium varius. Fusce vulputate nibh nec mauris pellentesque posuere.
If you link to an anchor inside a drawer, the drawer will be open when the page loads. Open this link in a new tab.
Attributes
| Name | Possible Values | Required | Notes |
|---|---|---|---|
| label | text | Yes | Displayed on the drawer open/close header |
| open | true or false | No | The drawer’s default state (defaults to false) |
Code Samples
Open Drawer
1 2 3 4 5 | [[drawer label="Hello World" open="true"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/drawer]] |
Closed Drawer
1 2 3 4 5 | [[drawer label="Hello World"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/drawer]] |