Accordion Example

Please provide feedback for this example in issue 210.

The below example section contains a simple personal information input form divided into 3 sections that demonstrates the design pattern for accordion. In this implementation, one panel of the accordion is always expanded, and only one panel may be expanded at a time. This example does not implement any of the optional keystrokes included in the accordion pattern.

Example

Personal Information: *Name:

*Email:

Phone:

Extension:

Country:

City/Province:
Billing Address: Address 1:

Address 2:

City:

State:

Zip Code:
Shipping Address: Address 1:

Address 2:

City:

State:

Zip Code:

Keyboard Support

Key	Function
`Space` or `Enter`	When focus is on the accordion header of a collapsed section, expands the section.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`heading`		`dt`	Creates the accordion header. The accordion structure is built on an HTML definition list where each term is recast as a header and each definition is recast as a panel.
	`aria-level=3`	`dt`	Specifies heading level for the accordion header.
`button`		`a`	A button inside the accordion header that provides hide/show functionality.
	`aria-expanded=true`	`a`	Set to `true` when the Accordion panel is expanded, otherwise set to `false`.
	`aria-controls=ID`	`a`	Points to the ID of the panel which the header controls.
	`aria-disabled=true`	`a`	If the accordion panel is expanded and is not allowed to be collapsed, then set to `true`.
region		`dd`	Creates a landmark region that contains the currently expanded accordion panel.
	`aria-labelledby="ID_REF"`	`dd`	Points to the accordion header. Labels the landmark region with the accordion header.

Javascript and CSS Source Code

CSS:
1. customize.css
JavaScript:
1. helpers.js
2. setup.js

HTML Source Code

<div id="coding-arena">
  <div class="demo-block">
    <dl id="accordionGroup">
      <dt role="heading"
        aria-level="3"
        class="clearfix">
        <a role="button"
         aria-expanded="false"
         href="#"
         class="accAccordion"
         aria-controls="sect1"
         data-defaultopen="true"
         id="accordion1id">
          <span class="icon">
          <span class="lbl">
            Personal Information
          </span>
        </a>
      </dt>
      <dd id="sect1"
        role="region"
        aria-labelledby="accordion1id"
        class="hidden">
        <div>
          <fieldset class="contact flex">
            <p>
              <label for="cufc1">
                <span class="cRed">
                  *
                </span>
                Name:
              </label>
              <input type="text"
                   value=""
                   name="Name"
                   id="cufc1"
                   class="required"
                   aria-required="true">
            </p>
            <p>
              <label for="cufc2">
                <span class="cRed">
                  *
                </span>
                Email:
              </label>
              <input type="text"
                   value=""
                   name="Email"
                   id="cufc2"
                   class="required"
                   aria-required="true">
            </p>
            <p>
              <label for="cufc3">
                Phone:
              </label>
              <input type="text"
                   value=""
                   name="Phone"
                   id="cufc3">
            </p>
            <p>
              <label for="cufc4">
                Extension:
              </label>
              <input type="text"
                   value=""
                   name="Ext"
                   id="cufc4">
            </p>
            <p>
              <label for="cufc5">
                Country:
              </label>
              <input type="text"
                   value=""
                   name="Country"
                   id="cufc5">
            </p>
            <p>
              <label for="cufc6">
                City/Province:
              </label>
              <input type="text"
                   value=""
                   name="City_Province"
                   id="cufc6">
            </p>
          </fieldset>
        </div>
      </dd>
      <dt role="heading"
        aria-level="3"
        class="clearfix">
        <a role="button"
         aria-expanded="false"
         href="#"
         class="accAccordion"
         aria-controls="sect2"
         id="accordion2id">
          <span class="icon">
          <span class="lbl">
            Billing Address
          </span>
        </a>
      </dt>
      <dd id="sect2"
        role="region"
        aria-labelledby="accordion2id"
        class="hidden">
        <div>
          <fieldset class="billing flex">
            <p>
              <label for="b-add1">
                Address 1:
              </label>
              <input type="text"
                   name="b-add1"
                   id="b-add1">
            </p>
            <p>
              <label for="b-add2">
                Address 2:
              </label>
              <input type="text"
                   name="b-add2"
                   id="b-add2">
            </p>
            <p>
              <label for="b-city">
                City:
              </label>
              <input type="text"
                   name="b-city"
                   id="b-city">
            </p>
            <p>
              <label for="b-state">
                State:
              </label>
              <input type="text"
                   name="b-state"
                   id="b-state">
            </p>
            <p>
              <label for="b-zip">
                Zip Code:
              </label>
              <input type="text"
                   name="b-zip"
                   id="b-zip">
            </p>
          </fieldset>
        </div>
      </dd>
      <dt role="heading"
        aria-level="3"
        class="clearfix">
        <a role="button"
         aria-expanded="false"
         href="#"
         class="accAccordion"
         aria-controls="sect3"
         id="accordion3id">
          <span class="icon">
          <span class="lbl">
            Shipping Address
          </span>
        </a>
      </dt>
      <dd id="sect3"
        role="region"
        aria-labelledby="accordion3id"
        class="hidden">
        <div>
          <fieldset class="shipping flex">
            <p>
              <label for="m-add1">
                Address 1:
              </label>
              <input type="text"
                   name="m-add1"
                   id="m-add1">
            </p>
            <p>
              <label for="m-add2">
                Address 2:
              </label>
              <input type="text"
                   name="m-add2"
                   id="m-add2">
            </p>
            <p>
              <label for="m-city">
                City:
              </label>
              <input type="text"
                   name="m-city"
                   id="m-city">
            </p>
            <p>
              <label for="m-state">
                State:
              </label>
              <input type="text"
                   name="m-state"
                   id="m-state">
            </p>
            <p>
              <label for="m-zip">
                Zip Code:
              </label>
              <input type="text"
                   name="m-zip"
                   id="m-zip">
            </p>
          </fieldset>
        </div>
      </dd>
    </dl>
  </div>
</div>