@ithaka/bonsai/documentation/pages/components/accordion-menu.md

ITHAKA core styling

---
title: Accordion Menu
description: A vertically stacked list of menu items, that can be expanded to reveal nested links associated with that item.
foundation: http://foundation.zurb.com/sites/docs/accordion-menu.html
sass: ./scss/_accordionmenu.scss
js: ./js/bonsai.accordionmenu.js
---

## Examples

### Barebones Accordion Menu

```html_example
<div class="small-3">
    <ul class="vertical menu accordion-menu" data-accordion-menu>
        <li>
            <a href="#">Item 1</a>
            <ul class="no-bullet">
                <li><a href="#">Item 1A</a></li>
                <li><a href="#">Item 1B</a></li>
            </ul>
        </li>
        <li><a href="#">Item 2</a></li>
    </ul>
</div>
```

### Open Accordion Menu

Add `class="active"` to the parent `li` to add color and styling to the menu item.
Add `class="is-active"` to the child `ul` to pop open that menu item.

```html_example
<div class="small-3">
    <ul class="vertical menu accordion-menu" data-accordion-menu>
        <li class="active">
            <a href="#">Item 1</a>
            <ul class="no-bullet is-active">
                <li><a href="#">Item 1A</a></li>
                <li><a href="#">Item 1B</a></li>
            </ul>
        </li>
        <li><a href="#">Item 2</a></li>
    </ul>
</div>
```

### Childless Accordion Menu

Useful if you are looking to get the Accordion Menu style without needing any accordion functionality

```html_example
<div class="small-3">
    <ul class="vertical menu accordion-menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>
```

## Guidelines
1. Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate especially on a touch interface.
2. Interactive elements within the collapsible region should be far enough from the headers, so that users don’t accidentally trigger a collapse. The exact distance depends on the device so test on multiple devices.
3. Include affordances that indicate if the accordion is expanded or collapsed.  This could include plus or minus icons, chevrons, or a color change.
4. Create a clear hierarchy of information between the header and the content within the accordion.  For example, consider indenting the content.
5. Create descriptive headings.
6. Accordions are a very useful design element on mobile because they solve the problem of displaying too much content in small screens.
7. Indicate where a user is within the navigational hierarchy. Use the “active” state to show users which page they have navigated to.
8. Keep the navigation links short. They can be shorter derivatives of page titles themselves.
9. If the navigation hierarchy is too long, users may miss items at the bottom. If it’s too deep, users may miss items that require too many clicks. Usability test to find the right balance between breadth and depth.
10. Displays a navigational hierarchy with one to three levels.
11. Displays the “sub-navigation” within a section of the website.

## Accessibility
1. Ensure that the accordion components are keyboard accessible. Users should be able to tab through each link as well as opening and closing the accordion via the keyboard.
2. Code header areas in the accordion as buttons so that they are usable with screen readers and keyboards.
3. Buttons should state whether they are expanded or not using the appropriate attribute: aria-expanded='true' or aria-expanded='false'.
4. Each button has a unique name that associates the control to the appropriate region by referencing the controlled elements id.
5. unique name example: aria-controls='collapsible-#'
6. Each content area has an aria-hidden attribute set to either true or false. When true, the element (and all children) are neither visible or perceivable, so assistive technologies will skip this content.    

## Avoid
1. Overly lengthy navigation titles, these can interfere with smooth resizing.

WCAG: https://www.w3.org/TR/wai-aria-practices/#accordion