--- title: Accordion desc: Vertically stacked list of items, each item can be expanded or collapsed to reveal the content associated with that item. ico: mdi:arrow-collapse-vertical keywords: - collapse - details - disclosure - summary alert: ico: mdi:wheelchair-accessibility body: | **For best accessibility:** Please use **details**{ .kbd .kbd-sm } and **summary**{ .kbd .kbd-sm } tags. Our CSS takes care of motion-safe sliding open/close animations. controls: - name: open type: toggle label: Open desc: The detail will open automatically when interacted with, but you can force it open by adding an open attribute. default: false - name: exclusive type: toggle label: Exclusive desc: Allow only one detail open at a time. default: false previewHeight: 25 #rem preview: |
Summary
Lorem ipsum dolor sit amet. Ad aute proident do eu ad eu consectetur ad esse incididunt mollit non.
Here's a summary with a very long label so we can test the wrapping and make sure the icon position, flex gap, and flex-shrink rules are working properly
Lorem ipsum dolor sit amet. Ad aute proident do eu ad eu consectetur ad esse incididunt mollit non.
The third summary
Lorem ipsum dolor sit amet. Ad aute proident do eu ad eu consectetur ad esse incididunt mollit non.
code: html: |
Summary
Content
[...] [...]
logic: exclusive: "this.exclusive ? ' name=\"group-name\"' : ''" open: "this.open ? ' open' : ''" ---