An accordion is a component that aggregates a big amount of content in a small space through progressive disclosure. The user gets a brief detail about the hidden content and can expand it to read the full amount.
This component is very useful on mobile platforms or whenever vertical space is used to its maximum.
- An accordion is composed by a vertically stacked list of headers that can be reveal or hide content associated with them. At Daimler the visual element that represent its state is the "+" (plus, when the tab is closed) or "-" (minus, when the tab is opened).
- The accordions at Daimler can contain only text, text with supportive images, filters and (multiple) tables.
- The Daimler accordion allows multiple sections to be expanded simultaneously.
- There is no limit to the height of an open row. The width of an accordion varies based on the content, layout, and page design.
Accordion containing text and supportive image.
Style used on mobile applications
Designs of the Accordion component are available for Sketch and integrated in the Daimler Design Kit. You can either copy paste them into your designs or use the Sketch file as a linked library and import the symbols.
See the Sketch Design Kit