rNbvWJX

index.html

<div id="accordionGroup" class="accordion">
  <h3>
    <button type="button" aria-expanded="true" class="accordion-trigger" aria-controls="sect1" id="accordion1id">
      <span class="accordion-title">
        Personal Information
        <span class="accordion-icon"></span>
      </span>
    </button>
  </h3>
  <div id="sect1" role="region" aria-labelledby="accordion1id" class="accordion-panel">
    <div>
      
      <fieldset>
        <p>
          <label for="cufc1">Name<span aria-hidden="true">*</span>:</label>
          <input type="text" value="" name="Name" id="cufc1" class="required" aria-required="true">
        </p>
        <p>
          <label for="cufc2">Email<span aria-hidden="true">*</span>:</label>
          <input type="text" value="" name="Email" id="cufc2" 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>
  </div>
  <h3>
    <button type="button" aria-expanded="false" class="accordion-trigger" aria-controls="sect2" id="accordion2id">
      <span class="accordion-title">
        Billing Address
        <span class="accordion-icon"></span>
      </span>
    </button>
  </h3>
  <div id="sect2" role="region" aria-labelledby="accordion2id" class="accordion-panel" hidden="">
    <div>
      <fieldset>
        <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>
  </div>
  <h3>
    <button type="button" aria-expanded="false" class="accordion-trigger" aria-controls="sect3" id="accordion3id">
      <span class="accordion-title">
        Shipping Address
        <span class="accordion-icon"></span>
      </span>
    </button>
  </h3>
  <div id="sect3" role="region" aria-labelledby="accordion3id" class="accordion-panel" hidden="">
    <div>
      <fieldset>
        <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>
  </div>
</div>
        

rnbvwjx.markdown

rNbvWJX

A Pen by Ernesto Blanco on CodePen.

License.

script.js

/*
 *   This content is licensed according to the W3C Software License at
 *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
 *
 *   Simple accordion pattern example
 */

'use strict';

class Accordion {
  constructor(domNode) {
    this.rootEl = domNode;
    this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');

    const controlsId = this.buttonEl.getAttribute('aria-controls');
    this.contentEl = document.getElementById(controlsId);

    this.open = this.buttonEl.getAttribute('aria-expanded') === 'true';

    // add event listeners
    this.buttonEl.addEventListener('click', this.onButtonClick.bind(this));
  }

  onButtonClick() {
    this.toggle(!this.open);
  }

  toggle(open) {
    // don't do anything if the open state doesn't change
    if (open === this.open) {
      return;
    }

    // update the internal state
    this.open = open;

    // handle DOM updates
    this.buttonEl.setAttribute('aria-expanded', `${open}`);
    if (open) {
      this.contentEl.removeAttribute('hidden');
    } else {
      this.contentEl.setAttribute('hidden', '');
    }
  }

  // Add public open and close methods for convenience
  open() {
    this.toggle(true);
  }

  close() {
    this.toggle(false);
  }
}

// init accordions
const accordions = document.querySelectorAll('.accordion h3');
accordions.forEach((accordionEl) => {
  new Accordion(accordionEl);
});

scripts

<script src="https://www.w3.orgcontent/shared/js/utils.js"></script>

style.css

.accordion {
  margin: 0;
  padding: 0;
  border: 2px solid hsl(0deg 0% 52%);
  border-radius: 7px;
  width: 20em;
}

.accordion h3 {
  margin: 0;
  padding: 0;
}

.accordion:focus-within {
  border-color: hsl(216deg 94% 43%);
}

.accordion:focus-within h3 {
  background-color: hsl(0deg 0% 97%);
}

.accordion > * + * {
  border-top: 1px solid hsl(0deg 0% 52%);
}

.accordion-trigger {
  background: none;
  color: hsl(0deg 0% 13%);
  display: block;
  font-size: 1rem;
  font-weight: normal;
  margin: 0;
  padding: 1em 1.5em;
  position: relative;
  text-align: left;
  width: 100%;
  outline: none;
}

.accordion-trigger:focus,
.accordion-trigger:hover {
  background: hsl(216deg 94% 94%);
}

.accordion-trigger:focus {
  outline: 4px solid transparent;
}

.accordion > *:first-child .accordion-trigger,
.accordion > *:first-child {
  border-radius: 5px 5px 0 0;
}

.accordion > *:last-child .accordion-trigger,
.accordion > *:last-child {
  border-radius: 0 0 5px 5px;
}

button {
  border-style: none;
}

.accordion button::-moz-focus-inner {
  border: 0;
}

.accordion-title {
  display: block;
  pointer-events: none;
  border: transparent 2px solid;
  border-radius: 5px;
  padding: 0.25em;
  outline: none;
}

.accordion-trigger:focus .accordion-title {
  border-color: hsl(216deg 94% 43%);
}

.accordion-icon {
  border: solid currentcolor;
  border-width: 0 2px 2px 0;
  height: 0.5rem;
  pointer-events: none;
  position: absolute;
  right: 2em;
  top: 50%;
  transform: translateY(-60%) rotate(45deg);
  width: 0.5rem;
}

.accordion-trigger:focus .accordion-icon,
.accordion-trigger:hover .accordion-icon {
  border-color: hsl(216deg 94% 43%);
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: translateY(-50%) rotate(-135deg);
}

.accordion-panel {
  margin: 0;
  padding: 1em 1.5em;
}

/* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
.accordion-panel[hidden] {
  display: none;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

input {
  border: 1px solid hsl(0deg 0% 42%);
  border-radius: 0.3em;
  display: block;
  font-size: inherit;
  padding: 0.3em 0.5em;
}

styles

<link href="https://www.w3.org/content/shared/css/core.css" rel="stylesheet" />
<link href="https://www.w3.org/StyleSheets/TR/2016/base.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" />