Accordions

Collection: Components

Content accordion

Tags: interactive, accordion, content

Example

1. Understand user needs

Understand user needs. Research to develop a deep knowledge of the users and their context for the service.

<details open data-label="content-accordion-1-example" aria-expanded="true">
  <summary>1. Understand user needs</summary>
  <div class="accordion-panel">
    <p>Understand user needs. Research to develop a deep knowledge of the users 
      and their context for the service.
    </p>
  </div>
</details>

<details open data-label="content-accordion-2-example" aria-expanded="false">
  <summary>2. Have a multi-disciplinary team</summary>
  <div class="accordion-panel">

    <p>Establish a sustainable multi-disciplinary team to design, build, 
      operate and iterate the service, led by an experienced product manager 
      with decision-making responsibility.
    </p>
  </div>
</details>

Controls accordion

Tags: interactive, accordion, controls

Example

What are you interested in? (Optional)
Filter by Topic
<details class="accordion--controls" data-label="accordion-controls-example"
  aria-expanded="true" open>
  <summary>What are you interested in? (Optional)</summary>
  <div class="accordion-panel">
    <form>
      <fieldset>

        <legend class="is-visuallyhidden">Filter by Topic</legend>

        <input id="aaa" name="reply" type="checkbox" value="AAA">
        <label for="aaa">Business and industry</label>

        <input id="bbb" name="reply" type="checkbox" value="BBB">
        <label for="bbb">Culture, sport and the arts</label>

      </fieldset>
    </form>
  </div>
</details>

Usability