{"componentChunkName":"component---src-pages-components-accordion-usage-mdx","path":"/components/accordion/usage/","result":{"pageContext":{"frontmatter":{"title":"Accordion","description":"The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/accordion/usage.mdx","titleType":"prepend","MdxNode":{"id":"97d588be-2fc3-5d14-9feb-3dd57790d871","children":[],"parent":"4ec927cc-9f38-5683-b7d8-a3f31ad813ae","internal":{"content":"---\ntitle: Accordion\ndescription: The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.\ntabs: [\"Code\", \"Usage\", \"Style\", \"Accessibility\"]\n---\n\n<PageDescription>\n\nAn accordion is a vertically stacked list of headers that reveal or hide associated sections of content.\n\n</PageDescription>\n\n<AnchorLinks>\n\n<AnchorLink>Overview</AnchorLink>\n<AnchorLink>Formatting</AnchorLink>\n<AnchorLink>Behavior</AnchorLink>\n<AnchorLink>Content</AnchorLink>\n<AnchorLink>Related</AnchorLink>\n<AnchorLink>References</AnchorLink>\n<AnchorLink>Feedback</AnchorLink>\n\n</AnchorLinks>\n\n## Overview\n\nThe accordion component delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content allowing the user to decide which sections to read.\n\nAccordions can make information processing and discovering more effective. However, it does hide content from users and it's important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don't use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.\n\n### When to use:\n\n- To organize related information.\n- To shorten pages and reduce scrolling when content is not crucial to read in full.\n- When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.\n\n## Formatting\n\n### Anatomy\n\n<Row>\n<Column colLg={8}>\n\n![accordion anatomy](images/accordion-anatomy.png)\n\n</Column>\n</Row>\n\n1. **Header**: contains the section title and is control for revealing the panel.\n2. **Icon**: indicates if the panel is open or closed.\n3. **Panel**: the section of content associated with an accordion header.\n\n### Alignment\n\nBy default the chevron icon is placed on the `end` side of the header. This allows for the title on the `start` side to align with other type elements in the layout.\n\n<DoDontRow>\n<DoDont\ncolMd={4} colLg={4}\ncaption=\"Do use the default icon alignment to keep accordion text aligned with other content on the page.\">\n\n![Do: use the default icon alignment to keep accordion text aligned with other content on the page.](./images/accordion-alignment-do.png)\n\n</DoDont>\n<DoDont\ncolMd={4} colLg={4}\ntype=\"dont\"\ncaption=\"Don’t place icons on the left and create misalignment with the other text on the page.\">\n\n![Don’t: place icons on the left and create misalignment with the other text on the page.](./images/accordion-alignment-dont.png)\n\n</DoDont>\n</DoDontRow>\n\n#### Modifier\n\nIn rare scenarios, the accordion can be modified to place the icon in front of the title to function more like a tree. However, most instances should use the default alignment and for any pure content or documentation purposes, the default alignment is required. Icon placement should be consistent throughout your experience.\n\n### Placement\n\nAccordions can be placed with main page content or placed inside of a container such as a side panel or tile.\n\n<Row>\n<Column colLg={12}>\n\n![accordion placement](images/accordion-placement-2.png)\n\n</Column>\n</Row>\n\n#### Grid placement\n\nWhen placing an accordion on the 2x Grid the indented title aligns to the grid columns and the top and bottom borders hang in the gutter.\n\n<Row>\n<Column colLg={8}>\n\n![accordion grid placement](images/accordion-placement-1.png)\n\n</Column>\n</Row>\n\n## Behavior\n\n### States\n\nThe accordion component has two main states: **collapsed** and **expanded**. The chevron icon at the end of the accordion indicates which state the accordion is in. The chevron points down to indicate collapsed and up to indicate expanded.\n\nAccordions begin by default in the collapsed state with all content panels closed. Starting in a collapsed state gives the user a high level overview of the available information.\n\n<Row>\n<Column colLg={8}>\n\n![accordion states](images/accordion-state-1.png)\n\n</Column>\n</Row>\n\nA user can then independently expand each section of the accordion allowing for multiple sections to be open at once.\n\n<Row>\n<Column colLg={8}>\n\n![multiple sections expanded](images/accordion-state-2.png)\n\n</Column>\n</Row>\n\nIn addition to the collapsed and expanded states, accordions also have interactive states for focus, hover, and disabled. See the [style tab](/components/accordion/style) for more details.\n\n<Row>\n<Column colLg={8}>\n\n![accordion interactives states](images/accordion-state-3.png)\n\n</Column>\n</Row>\n\n### Interactions\n\n#### Mouse\n\nUsers can trigger a state change by clicking on the chevron or clicking anywhere in the header area.\n\n<Row>\n<Column colLg={8}>\n\n![accordion click targets](images/accordion-click-target.png)\n\n</Column>\n</Row>\n\n#### Keyboard\n\nUsers can trigger a state change by pressing the `Enter` or `Spacebar` key while the header area has focus. For additional keyboard interactions, see the [accessibility tab](/components/accordion/accessibility#how-it-works).\n\nUsers can navigate between accordion headers by pressing `Tab` or `Shift-Tab`.\n\n#### Screen readers\n\nVoiceOver: Users can trigger a state change by pressing `Control-Option-Space` or the `Spacebar` while the header area has screen reader focus.\n\nJAWS: Users can trigger a state change by pressing `Enter` or `Spacebar` key while the header area has screen reader focus.\n\nNVDA: Users can trigger a state change by pressing `Enter` or `Spacebar` key while the header area has screen reader focus.\n\nFor additional information, see [screen reader tests](https://www.carbondesignsystem.com/components/accordion/accessibility#macos-screen-reader-tests).\n\n## Content\n\n### Main elements\n\n#### Title\n\n- The title should be as brief as possible while still being clear and descriptive.\n- Each title should be wrapped in a [role heading](https://www.w3.org/TR/wai-aria-practices-1.1/#wai-aria-roles-states-and-properties) (h1-h6) that is appropriate for the information architecture of the page.\n\n#### Body copy\n\n- Content inside of a section may be split into paragraphs and include sub-headers if needed.\n\n### Scrolling content\n\nWhen the accordion content is longer than the viewport the whole accordion should vertically scroll. Content should not scroll inside of an individual panel. Content should never scroll horizontally in an accordion.\n\n## Related\n\nThe following components are additional ways to organize content. Consider the type and length of content you are working with when choosing a content container. Longer form content may benefit from tabs or a content switcher while very short content might do better in a structured list.\n\n- [Content switcher](/components/content-switcher/code/)\n- [Progress indicator](/components/progress-indicator/code)\n- [Structured list](/components/structured-list/code)\n- [Tabs](/components/tabs/code)\n- Tree view\n\n## References\n\n- Hoa Loranger, [Accordions Are Not Always the Answer for Complex Content on Desktops](https://www.nngroup.com/articles/accordions-complex-content/) (Nielsen Norman Group, 2014)\n\n## Feedback\n\nHelp us improve this pattern by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).\n","type":"Mdx","contentDigest":"a4c6be79bc8a049361ec7a0d4a126dfa","counter":1453,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Accordion","description":"The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Accordion\ndescription: The accordion component delivers large amounts of content in a small space through progressive disclosure. The user gets key details about the underlying content and can choose to expand that content.\ntabs: [\"Code\", \"Usage\", \"Style\", \"Accessibility\"]\n---\n\n<PageDescription>\n\nAn accordion is a vertically stacked list of headers that reveal or hide associated sections of content.\n\n</PageDescription>\n\n<AnchorLinks>\n\n<AnchorLink>Overview</AnchorLink>\n<AnchorLink>Formatting</AnchorLink>\n<AnchorLink>Behavior</AnchorLink>\n<AnchorLink>Content</AnchorLink>\n<AnchorLink>Related</AnchorLink>\n<AnchorLink>References</AnchorLink>\n<AnchorLink>Feedback</AnchorLink>\n\n</AnchorLinks>\n\n## Overview\n\nThe accordion component delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content allowing the user to decide which sections to read.\n\nAccordions can make information processing and discovering more effective. However, it does hide content from users and it's important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don't use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.\n\n### When to use:\n\n- To organize related information.\n- To shorten pages and reduce scrolling when content is not crucial to read in full.\n- When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.\n\n## Formatting\n\n### Anatomy\n\n<Row>\n<Column colLg={8}>\n\n![accordion anatomy](images/accordion-anatomy.png)\n\n</Column>\n</Row>\n\n1. **Header**: contains the section title and is control for revealing the panel.\n2. **Icon**: indicates if the panel is open or closed.\n3. **Panel**: the section of content associated with an accordion header.\n\n### Alignment\n\nBy default the chevron icon is placed on the `end` side of the header. This allows for the title on the `start` side to align with other type elements in the layout.\n\n<DoDontRow>\n<DoDont\ncolMd={4} colLg={4}\ncaption=\"Do use the default icon alignment to keep accordion text aligned with other content on the page.\">\n\n![Do: use the default icon alignment to keep accordion text aligned with other content on the page.](./images/accordion-alignment-do.png)\n\n</DoDont>\n<DoDont\ncolMd={4} colLg={4}\ntype=\"dont\"\ncaption=\"Don’t place icons on the left and create misalignment with the other text on the page.\">\n\n![Don’t: place icons on the left and create misalignment with the other text on the page.](./images/accordion-alignment-dont.png)\n\n</DoDont>\n</DoDontRow>\n\n#### Modifier\n\nIn rare scenarios, the accordion can be modified to place the icon in front of the title to function more like a tree. However, most instances should use the default alignment and for any pure content or documentation purposes, the default alignment is required. Icon placement should be consistent throughout your experience.\n\n### Placement\n\nAccordions can be placed with main page content or placed inside of a container such as a side panel or tile.\n\n<Row>\n<Column colLg={12}>\n\n![accordion placement](images/accordion-placement-2.png)\n\n</Column>\n</Row>\n\n#### Grid placement\n\nWhen placing an accordion on the 2x Grid the indented title aligns to the grid columns and the top and bottom borders hang in the gutter.\n\n<Row>\n<Column colLg={8}>\n\n![accordion grid placement](images/accordion-placement-1.png)\n\n</Column>\n</Row>\n\n## Behavior\n\n### States\n\nThe accordion component has two main states: **collapsed** and **expanded**. The chevron icon at the end of the accordion indicates which state the accordion is in. The chevron points down to indicate collapsed and up to indicate expanded.\n\nAccordions begin by default in the collapsed state with all content panels closed. Starting in a collapsed state gives the user a high level overview of the available information.\n\n<Row>\n<Column colLg={8}>\n\n![accordion states](images/accordion-state-1.png)\n\n</Column>\n</Row>\n\nA user can then independently expand each section of the accordion allowing for multiple sections to be open at once.\n\n<Row>\n<Column colLg={8}>\n\n![multiple sections expanded](images/accordion-state-2.png)\n\n</Column>\n</Row>\n\nIn addition to the collapsed and expanded states, accordions also have interactive states for focus, hover, and disabled. See the [style tab](/components/accordion/style) for more details.\n\n<Row>\n<Column colLg={8}>\n\n![accordion interactives states](images/accordion-state-3.png)\n\n</Column>\n</Row>\n\n### Interactions\n\n#### Mouse\n\nUsers can trigger a state change by clicking on the chevron or clicking anywhere in the header area.\n\n<Row>\n<Column colLg={8}>\n\n![accordion click targets](images/accordion-click-target.png)\n\n</Column>\n</Row>\n\n#### Keyboard\n\nUsers can trigger a state change by pressing the `Enter` or `Spacebar` key while the header area has focus. For additional keyboard interactions, see the [accessibility tab](/components/accordion/accessibility#how-it-works).\n\nUsers can navigate between accordion headers by pressing `Tab` or `Shift-Tab`.\n\n#### Screen readers\n\nVoiceOver: Users can trigger a state change by pressing `Control-Option-Space` or the `Spacebar` while the header area has screen reader focus.\n\nJAWS: Users can trigger a state change by pressing `Enter` or `Spacebar` key while the header area has screen reader focus.\n\nNVDA: Users can trigger a state change by pressing `Enter` or `Spacebar` key while the header area has screen reader focus.\n\nFor additional information, see [screen reader tests](https://www.carbondesignsystem.com/components/accordion/accessibility#macos-screen-reader-tests).\n\n## Content\n\n### Main elements\n\n#### Title\n\n- The title should be as brief as possible while still being clear and descriptive.\n- Each title should be wrapped in a [role heading](https://www.w3.org/TR/wai-aria-practices-1.1/#wai-aria-roles-states-and-properties) (h1-h6) that is appropriate for the information architecture of the page.\n\n#### Body copy\n\n- Content inside of a section may be split into paragraphs and include sub-headers if needed.\n\n### Scrolling content\n\nWhen the accordion content is longer than the viewport the whole accordion should vertically scroll. Content should not scroll inside of an individual panel. Content should never scroll horizontally in an accordion.\n\n## Related\n\nThe following components are additional ways to organize content. Consider the type and length of content you are working with when choosing a content container. Longer form content may benefit from tabs or a content switcher while very short content might do better in a structured list.\n\n- [Content switcher](/components/content-switcher/code/)\n- [Progress indicator](/components/progress-indicator/code)\n- [Structured list](/components/structured-list/code)\n- [Tabs](/components/tabs/code)\n- Tree view\n\n## References\n\n- Hoa Loranger, [Accordions Are Not Always the Answer for Complex Content on Desktops](https://www.nngroup.com/articles/accordions-complex-content/) (Nielsen Norman Group, 2014)\n\n## Feedback\n\nHelp us improve this pattern by providing feedback, asking questions, and leaving any other comments on [GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).\n","fileAbsolutePath":"/zeit/3b23ef32/src/pages/components/accordion/usage.mdx"}}}}