Accordion

Roadmap

  • Add background options.

Accordions: Multi Select

Component Preview
<div class="accordion
  " role="tablist" aria-multiselectable="true">
      <!-- Use the accurate heading level to maintain the document outline -->
      <h2 id="accordion-heading-1" class="accordion__heading">
          <button class="accordion__button" role="tab" aria-selected="true" aria-expanded="true" aria-controls="single-select-1">
              Chocolate Chip Cookie
              <i aria-hidden="true" focusable="false" class="fas fa-chevron-up"></i>
          </button>
      </h2>
      <div id="single-select-1" aria-labelledby="accordion-heading-1" class="accordion__content">
          <p>Among the most popular of all cookie types, the chocolate chip cookie's invention was a happy accident. In 1930, Ruth Graves Wakefield, who ran the Toll House Inn in Whitman, Massachusetts, ran out of baker's chocolate and substituted for it with pieces of Nestle's® semi-sweet chocolate. </p>

      </div>
      <!-- Use the accurate heading level to maintain the document outline -->
      <h2 id="accordion-heading-2" class="accordion__heading">
          <button class="accordion__button" role="tab" aria-selected="false" aria-expanded="false" aria-controls="single-select-2">
              Sugar Cookie
              <i aria-hidden="true" focusable="false" class="fas fa-chevron-up"></i>
          </button>
      </h2>
      <div id="single-select-2" aria-labelledby="accordion-heading-2" class="accordion__content">
          <p>The sugar cookie is like the vanilla ice cream of cookies—everyone likes it but few claim it as their favorite. Basic ingredients like sugar, flour, butter, eggs, and vanilla make up this popular cookie type.</p>

      </div>
      <!-- Use the accurate heading level to maintain the document outline -->
      <h2 id="accordion-heading-3" class="accordion__heading">
          <button class="accordion__button" role="tab" aria-selected="false" aria-expanded="false" aria-controls="single-select-3">
              Snickerdoodle Cookies
              <i aria-hidden="true" focusable="false" class="fas fa-chevron-up"></i>
          </button>
      </h2>
      <div id="single-select-3" aria-labelledby="accordion-heading-3" class="accordion__content">
          <p>Although the origin of this beloved cookie is up for debate, there's no doubt it's a favorite during the holidays. Snickerdoodles are a type of drop cookie (any cookie that is formed by dropping spoonfuls of dough directly onto a baking sheet) that is coated in cinnamon and sugar. </p>

      </div>
      <!-- Use the accurate heading level to maintain the document outline -->
      <h2 id="accordion-heading-4" class="accordion__heading">
          <button class="accordion__button" role="tab" aria-selected="false" aria-expanded="false" aria-controls="single-select-4">
              Oatmeal Raisin
              <i aria-hidden="true" focusable="false" class="fas fa-chevron-up"></i>
          </button>
      </h2>
      <div id="single-select-4" aria-labelledby="accordion-heading-4" class="accordion__content">
          <p>A seriously underrated cookie, oatmeal raisin is another type of drop cookie. Its dough is oatmeal based, and contains raisins and brown sugar. They're warm and comforting—a reminder of simpler times and grandma's house.</p>

      </div>
  </div>
  • Content:
    .accordion .accordion__heading {
      margin: 0;
      margin-top: 1rem;
      font-size: 1rem;
      font-weight: 700; }
      .accordion .accordion__heading:not(:first-child) {
        margin-top: 1rem; }
      .accordion .accordion__heading button {
        all: inherit;
        font-size: 1.2rem;
        width: 100%;
        background-color: #edeceb;
        padding: 1.05rem;
        display: flex;
        justify-content: space-between;
        transition: all 0.2s ease-in-out;
        transition-property: background-color;
        cursor: pointer; }
        .accordion .accordion__heading button:focus {
          outline: 5px auto -webkit-focus-ring-color; }
        .accordion .accordion__heading button i, .accordion .accordion__heading button svg {
          color: currentColor;
          transform: rotate(-180deg) translate(0px, -0.1em);
          transition: all 0.3s ease-in-out;
          transition-property: transform, background-color;
          background-color: transparent;
          width: 30px !important;
          height: 30px;
          padding: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: -0.3rem 0;
          border-radius: 50%; }
        .accordion .accordion__heading button:hover, .accordion .accordion__heading button:focus {
          background-color: #e3e2e0; }
          .accordion .accordion__heading button:hover i, .accordion .accordion__heading button:focus i {
            transform: rotate(-180deg) translate(0px, -0.2em); }
          .accordion .accordion__heading button:hover[aria-expanded="true"] i, .accordion .accordion__heading button:hover[aria-expanded="true"] svg, .accordion .accordion__heading button:focus[aria-expanded="true"] i, .accordion .accordion__heading button:focus[aria-expanded="true"] svg {
            transform: rotate(0deg) translate(0px, 0em); }
        .accordion .accordion__heading button[aria-expanded="true"] i, .accordion .accordion__heading button[aria-expanded="true"] svg {
          transform: rotate(0deg) translate(0px, 0.1em);
          background-color: #fafafa; }
    
    .accordion .accordion__content {
      padding: 1.05rem;
      border: 1px solid #edeceb; }
    
  • URL: /components/raw/accordion/accordion.css
  • Filesystem Path: src/components/accordion/accordion.css
  • Size: 2 KB
  • Content:
    function Accordion(element) {
      this.panels = element.getElementsByClassName("accordion__heading");
      this.multiSelectible = element.getAttribute('aria-multiselectable') === 'true' || false;
    
      for (let i = 0; i < this.panels.length; i++) {
    
        let btn = this.panels[i].querySelector('button');
        let target = this.panels[i].nextElementSibling;
    
        let expanded = btn.getAttribute('aria-expanded') === 'true' || false;
        target.hidden = !expanded;
    
        btn.onclick = () => {
          this.togglePanel(btn, target);
        }
      }
    }
    
    Accordion.prototype.togglePanel = function(btn, target) {
      let expanded = btn.getAttribute('aria-expanded') === 'true' || false;
    
      // Checks if multiple panels can be open at once. If not, closes other panels.
      if (!this.multiSelectible && !expanded) {
        this.collapseAllPanels();
      }
    
      btn.setAttribute('aria-expanded', !expanded);
      btn.setAttribute('aria-selected', !expanded);
      target.hidden = expanded;
    }
    
    Accordion.prototype.collapseAllPanels = function() {
      for (let i = 0; i < this.panels.length; i++) {
        let inner_target = this.panels[i].nextElementSibling;
        let inner_btn = this.panels[i].querySelector('button');
        inner_btn.setAttribute('aria-expanded', 'false');
        inner_btn.setAttribute('aria-selected', 'false');
        inner_target.hidden = true;
      }
    }
    
    // Instantiate accordions on the page.
    const accordions = document.getElementsByClassName("accordion");
    
    for (let i = 0; i < accordions.length; i++) {
      let accordion = new Accordion(accordions[i]);
    }
    
    
  • URL: /components/raw/accordion/accordion.js
  • Filesystem Path: src/components/accordion/accordion.js
  • Size: 1.5 KB
  • Content:
    @import '../../assets/scss/variables';
    /////// Accordions
    .accordion {
      .accordion__heading {
        margin: 0;
        margin-top: 1rem;
        font-size: 1rem;
        font-weight: $font-weight-bold;
    
        &:not(:first-child) {
          margin-top: 1rem;
        }
    
        button {
          all: inherit;
          font-size: 1.2rem;
          width: 100%;
          background-color: #edeceb;
          padding: $md;
          display: flex;
          justify-content: space-between;
          transition: all 0.2s ease-in-out;
          transition-property: background-color;
          cursor: pointer;
    
          &:focus {
            outline: 5px auto -webkit-focus-ring-color;
          }
    
          i, svg {
            color: currentColor;
            transform: rotate(-180deg) translate(0px, -0.1em);
            transition: all 0.3s ease-in-out;
            transition-property: transform, background-color;
            background-color: transparent;
            width: 30px !important;
            height: 30px;
            padding: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: -0.3rem 0;
            border-radius: 50%;
          }
    
          &:hover, &:focus {
            background-color: darken(#edeceb, 4%);
    
            i {
              transform: rotate(-180deg) translate(0px, -0.2em);
            }
    
            &[aria-expanded="true"] i, &[aria-expanded="true"] svg {
              transform: rotate(0deg) translate(0px, 0em);
            }
          }
    
          &[aria-expanded="true"] i, &[aria-expanded="true"] svg {
            transform: rotate(0deg) translate(0px, 0.1em);
            background-color: #fafafa;
          }
        }
      }
    
      .accordion__content {
        padding: $md;
        border: 1px solid #edeceb;
      }
    }
    
  • URL: /components/raw/accordion/accordion.scss
  • Filesystem Path: src/components/accordion/accordion.scss
  • Size: 1.6 KB