There's a new version of UIDS!

UIDS - UI Design System

Accordion

Roadmap

  • Add background options.

Accordions: Accordion focus test

Component Preview 
<div id="lipsum">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada urna vitae convallis semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lobortis hendrerit molestie. Aenean porttitor suscipit dapibus. Sed aliquet auctor scelerisque. Vestibulum vehicula urna eget nisl rhoncus, non cursus mauris tristique. Pellentesque at accumsan metus. Integer vitae nulla vitae metus semper volutpat id nec quam. Fusce iaculis aliquet sapien quis commodo. Nullam risus tortor, commodo vitae molestie ac, consectetur non eros. Etiam pharetra quis lectus vel semper. Nam nec lacus dolor.
    </p>
    <p>
        Nullam dignissim nisi libero, a viverra velit euismod at. Sed blandit pharetra purus non molestie. Praesent elit sapien, mollis in lorem ornare, suscipit congue nunc. Maecenas sed dignissim augue. Ut luctus ultricies lectus quis pulvinar. Pellentesque porta ligula magna, sed efficitur arcu pulvinar ut. Pellentesque auctor, neque a malesuada lobortis, felis risus pretium ex, dictum vehicula purus enim non diam. Mauris vel ante eleifend leo pulvinar rutrum. Donec id varius neque. Nam eros ligula, ornare ut tempor sed, faucibus at mauris.
    </p>
    <p>
        Etiam id libero ornare mi laoreet commodo nec eu sem. Nullam in purus vitae purus sodales iaculis. Sed vitae nunc tempor, fermentum ipsum et, vestibulum enim. Suspendisse ut iaculis tortor. Duis vitae congue arcu. Proin nec velit vel tellus mollis viverra imperdiet quis enim. Curabitur placerat eros id dapibus hendrerit. Pellentesque eget dictum felis, quis euismod lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris fringilla eu odio non vehicula. Sed fringilla sed leo non mattis. Donec non aliquam eros, quis posuere dolor. Suspendisse condimentum libero non metus posuere, vel vestibulum elit commodo. Vestibulum accumsan nibh ac elit viverra vestibulum non at ex. Phasellus eu orci velit.
    </p>
    <p>
        Fusce mattis ante mi, eu blandit ligula ullamcorper quis. Suspendisse eu ex a magna vulputate elementum non sed magna. Duis a nulla efficitur, gravida enim non, malesuada ipsum. Vivamus quis neque nisi. Proin venenatis eros quis eros lobortis, vel bibendum augue cursus. Curabitur enim libero, tincidunt ac volutpat sit amet, ullamcorper ut mauris. Nam dui lorem, ultricies eu nisl non, sollicitudin scelerisque tortor. Quisque vitae sodales lorem. Praesent lacinia, erat a fermentum fringilla, lacus magna luctus augue, id consequat augue velit non lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec eleifend lacus posuere sem euismod, id semper ligula placerat. Vivamus suscipit, ex et interdum pharetra, nunc velit lacinia arcu, vitae lacinia est ligula eu tortor.
    </p>
    <p>
        Morbi lobortis malesuada tellus, nec fermentum odio. Aenean nunc ipsum, vulputate tristique erat at, egestas molestie enim. Morbi aliquam lectus quis arcu finibus blandit. Etiam consectetur porta sapien, eu elementum lacus vestibulum vel. Phasellus finibus rutrum dictum. Proin eu consequat massa. Donec at leo leo. In et volutpat velit. Ut a vulputate mi, non mollis quam. Integer eget ex vitae metus aliquam tempor quis in felis. In sapien dolor, mollis nec vulputate nec, consectetur vel turpis. Nulla dapibus a metus eget facilisis. Vestibulum quis augue vitae diam pretium volutpat. Sed ligula tellus, efficitur quis diam at, sagittis eleifend nisi. Pellentesque quis malesuada erat.
    </p>
</div>

<div class="accordion
  " role="tablist" aria-multiselectable="false">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h2 id="chocolate_chip" class="accordion__heading">
        <button class="accordion__button" role="tab" aria-selected="true" aria-expanded="true" aria-controls="single-select-0">
            Chocolate Chip Cookie
            <i aria-hidden="true" focusable="false" class="fas fa-chevron-up"></i>
        </button>
    </h2>
    <div id="single-select-0" aria-labelledby="chocolate_chip" class="accordion__content bg--white">
        <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="sugar" class="accordion__heading">
        <button class="accordion__button" role="tab" aria-selected="false" aria-expanded="false" aria-controls="single-select-1">
            Sugar Cookie
            <i aria-hidden="true" focusable="false" class="fas fa-chevron-up"></i>
        </button>
    </h2>
    <div id="single-select-1" aria-labelledby="sugar" class="accordion__content bg--white">
        <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="snickerdoodle" class="accordion__heading">
        <button class="accordion__button" role="tab" aria-selected="false" aria-expanded="false" aria-controls="single-select-2">
            Snickerdoodle Cookies
            <i aria-hidden="true" focusable="false" class="fas fa-chevron-up"></i>
        </button>
    </h2>
    <div id="single-select-2" aria-labelledby="snickerdoodle" class="accordion__content bg--white">
        <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="oatmeal" class="accordion__heading">
        <button class="accordion__button" role="tab" aria-selected="false" aria-expanded="false" aria-controls="single-select-3">
            Oatmeal Raisin
            <i aria-hidden="true" focusable="false" class="fas fa-chevron-up"></i>
        </button>
    </h2>
    <div id="single-select-3" aria-labelledby="oatmeal" class="accordion__content bg--white">

        <p>Lorem ipsum dolor sit amet. Aut quia odio eum esse consequatur et dolor similique At consequuntur asperiores ut eius voluptas. Qui officiis modi eum possimus iusto eum quam eaque. Est aspernatur officiis a porro rerum eum nihil sint est iure quidem qui dicta cumque ex omnis temporibus. Eum iste pariatur et expedita unde qui vitae possimus nam voluptas esse aut ullam quam. Eum tempora fugit et fugit recusandae sed ipsa corrupti et labore asperiores in fuga atque est amet aliquid ut nihil animi.</p>

        <p>Vel laboriosam magni vel accusamus sint eum neque rerum et similique blanditiis est voluptatibus voluptas ea fugiat quas. Qui laudantium minima aut iure totam ut quibusdam dolorem rem dolor accusamus eum reiciendis ipsa qui facere nisi non ratione quia. Vel exercitationem optio sed eaque quisquam in voluptatem dolorem sed voluptas voluptas est ratione tenetur. Sit veritatis error <a href="https://www.loremipzum.com" target="_blank">Cum ipsam et veritatis similique et sapiente velit</a>. At repudiandae nisi 33 galisum quia est voluptatem odit ut placeat omnis sit impedit voluptatem.</p>

        <blockquote>
            <p>Sit veritatis error <a href="https://www.loremipzum.com" target="_blank">Cum ipsam et veritatis similique et sapiente velit</a>. At repudiandae nisi 33 galisum quia est voluptatem odit ut placeat omnis sit impedit voluptatem.</p>
        </blockquote>

        <p>Et veniam odit aut consequatur illum <a href="https://www.loremipzum.com" target="_blank">Aut reiciendis et adipisci laboriosam qui omnis culpa aut repudiandae sapiente</a>. Ut quae dolor qui odit fuga eos laboriosam reiciendis sed laudantium accusantium. Est minus sint eum porro adipisci qui sunt ipsum. Qui odio Quis ut saepe laborum et dolores animi aut esse necessitatibus? Quo dolores sunt et adipisci consectetur id enim suscipit. Aut maiores officiis et galisum minima id aliquid ullam. Et consequuntur cupiditate ut placeat velit ut inventore neque ab suscipit natus qui quaerat voluptatem. Et esse suscipit est maiores delectus et placeat quia in dolorum fuga. Est fugit odit est fugiat dolores qui error quia est incidunt quis sed repudiandae asperiores et internos quia!</p>

        <ul>
            <li>Vel exercitationem optio sed eaque quisquam in voluptatem dolorem sed voluptas voluptas est ratione tenetur. Sit veritatis error <a href="https://www.loremipzum.com" target="_blank">Cum ipsam et veritatis similique et sapiente velit</a>. At repudiandae nisi 33 galisum quia est voluptatem odit ut placeat omnis sit impedit voluptatem.</li>
            <li>Et veniam odit aut consequatur illum <a href="https://www.loremipzum.com" target="_blank">Aut reiciendis et adipisci laboriosam qui omnis culpa aut repudiandae sapiente</a>. Ut quae</li>
        </ul>
        <ol>
            <li>Vel exercitationem optio sed eaque quisquam in voluptatem dolorem sed voluptas voluptas est ratione tenetur. Sit veritatis error <a href="https://www.loremipzum.com" target="_blank">Cum ipsam et veritatis similique et sapiente velit</a>. At repudiandae nisi 33 galisum quia est voluptatem odit ut placeat omnis sit impedit voluptatem.</li>
            <li>Et veniam odit aut consequatur illum <a href="https://www.loremipzum.com" target="_blank">Aut reiciendis et adipisci laboriosam qui omnis culpa aut repudiandae sapiente</a>. Ut quae</li>
        </ol>
        <p>&nbsp;</p>

    </div>
</div>
<div id="lipsum">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada urna vitae convallis semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lobortis hendrerit molestie. Aenean porttitor suscipit dapibus. Sed aliquet auctor scelerisque. Vestibulum vehicula urna eget nisl rhoncus, non cursus mauris tristique. Pellentesque at accumsan metus. Integer vitae nulla vitae metus semper volutpat id nec quam. Fusce iaculis aliquet sapien quis commodo. Nullam risus tortor, commodo vitae molestie ac, consectetur non eros. Etiam pharetra quis lectus vel semper. Nam nec lacus dolor.
    </p>
    <p>
        Nullam dignissim nisi libero, a viverra velit euismod at. Sed blandit pharetra purus non molestie. Praesent elit sapien, mollis in lorem ornare, suscipit congue nunc. Maecenas sed dignissim augue. Ut luctus ultricies lectus quis pulvinar. Pellentesque porta ligula magna, sed efficitur arcu pulvinar ut. Pellentesque auctor, neque a malesuada lobortis, felis risus pretium ex, dictum vehicula purus enim non diam. Mauris vel ante eleifend leo pulvinar rutrum. Donec id varius neque. Nam eros ligula, ornare ut tempor sed, faucibus at mauris.
    </p>
    <p>
        Etiam id libero ornare mi laoreet commodo nec eu sem. Nullam in purus vitae purus sodales iaculis. Sed vitae nunc tempor, fermentum ipsum et, vestibulum enim. Suspendisse ut iaculis tortor. Duis vitae congue arcu. Proin nec velit vel tellus mollis viverra imperdiet quis enim. Curabitur placerat eros id dapibus hendrerit. Pellentesque eget dictum felis, quis euismod lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris fringilla eu odio non vehicula. Sed fringilla sed leo non mattis. Donec non aliquam eros, quis posuere dolor. Suspendisse condimentum libero non metus posuere, vel vestibulum elit commodo. Vestibulum accumsan nibh ac elit viverra vestibulum non at ex. Phasellus eu orci velit.
    </p>
    <p>
        Fusce mattis ante mi, eu blandit ligula ullamcorper quis. Suspendisse eu ex a magna vulputate elementum non sed magna. Duis a nulla efficitur, gravida enim non, malesuada ipsum. Vivamus quis neque nisi. Proin venenatis eros quis eros lobortis, vel bibendum augue cursus. Curabitur enim libero, tincidunt ac volutpat sit amet, ullamcorper ut mauris. Nam dui lorem, ultricies eu nisl non, sollicitudin scelerisque tortor. Quisque vitae sodales lorem. Praesent lacinia, erat a fermentum fringilla, lacus magna luctus augue, id consequat augue velit non lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec eleifend lacus posuere sem euismod, id semper ligula placerat. Vivamus suscipit, ex et interdum pharetra, nunc velit lacinia arcu, vitae lacinia est ligula eu tortor.
    </p>
    <p>
        Morbi lobortis malesuada tellus, nec fermentum odio. Aenean nunc ipsum, vulputate tristique erat at, egestas molestie enim. Morbi aliquam lectus quis arcu finibus blandit. Etiam consectetur porta sapien, eu elementum lacus vestibulum vel. Phasellus finibus rutrum dictum. Proin eu consequat massa. Donec at leo leo. In et volutpat velit. Ut a vulputate mi, non mollis quam. Integer eget ex vitae metus aliquam tempor quis in felis. In sapien dolor, mollis nec vulputate nec, consectetur vel turpis. Nulla dapibus a metus eget facilisis. Vestibulum quis augue vitae diam pretium volutpat. Sed ligula tellus, efficitur quis diam at, sagittis eleifend nisi. Pellentesque quis malesuada erat.
    </p>
</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;
    color: var(--brand-secondary);
    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.1 KB
  • Content: 
    (function () {
  function Accordion(element) {
    let thisAccordion = this;

    // Get the accordions, and if the accordion group is multiselectable.
    this.accordions = element.getElementsByClassName("accordion__heading");
    this.multiSelectible = element.getAttribute('aria-multiselectable') === 'true' || false;

    // For each of the accordions...
    for (let i = 0; i < this.accordions.length; i++) {

      // Get the accordion item's components.
      let itemComponents = this.accordionItemComponents(this.accordions[i]);

      // Check if the accordion is currently expanded at moment of click.
      let expanded = this.isAccordionOpen(itemComponents.btn);

      // If it is, un-hide its corresponding panel.
      itemComponents.panel.hidden = !expanded;

      // When the accordion's button is clicked...
      itemComponents.btn.onclick = () => {

        // Toggle the corresponding accordion.
        this.toggleAccordion(this.accordions[i]);
      }
    }

    // Add a listener that listens for when the URL is changed.
    window.addEventListener('popstate', function (event) {

      // Activate an accordion based upon the hash parameters in the URL.
      thisAccordion.activateAccordionByHash();
    });

    // Activate any accordion that is defined in the hash parameter if there is one.
    this.activateAccordionByHash();
  }

  // Gets the item components for 'accordion'.
  // Returns an object that contains 'btn' and 'panel' elements.
  Accordion.prototype.accordionItemComponents = function (accordion) {
    let btn = accordion.querySelector('button');
    let panel = accordion.nextElementSibling;

    return {
      'btn': btn,
      'panel': panel
    }
  }

  // Define whether 'accordion' is open with 'isOpen'.
  Accordion.prototype.accordionOpen = function (accordion, isOpen) {
    // Get the accordion item's components.
    let itemComponents = this.accordionItemComponents(accordion);

    // Set the relevant attributes for 'accordion' based on 'isOpen'.
    itemComponents.btn.setAttribute('aria-expanded', isOpen);
    itemComponents.btn.setAttribute('aria-selected', isOpen);
    itemComponents.panel.hidden = !isOpen;
  }

  // Activate an 'accordion'.
  Accordion.prototype.activateAccordion = function (accordion) {

    // Checks if multiple accordions can be open at once. If not, closes other accordions.
    if (!this.multiSelectible) {
      this.collapseAllAccordions();
    }

    // Open the accordion.
    this.accordionOpen(accordion, true);
  }

  // Activate any accordion that is defined in the hash parameter if there is one.
  Accordion.prototype.activateAccordionByHash = function () {

    // Get the hash parameter.
    let hash = window.location.hash.substr(1);

    // If the hash parameter is not empty...
    if (hash !== '') {

      // Get the accordion to focus.
      let accordionToFocus = document.getElementById(hash);

      // If the defined hash parameter finds an element...
      if (accordionToFocus !== null) {

        // Get the accordion wrapper of the hash parameter and this accordion wrapper to compare later.
        let accordionToFocusAccordionWrapper = accordionToFocus.parentElement
        let accordionWrapper = this.accordions[0].parentElement;

        // If the accordion wrapper defined by the hash and this accordion wrapper are the same...
        if (accordionToFocusAccordionWrapper === accordionWrapper) {

          // Activate the accordion defined in the hash parameters.
          this.activateAccordion(accordionToFocus);
        }
      }
    }
  }

  // Collapse all accordions in this accordion group.
  Accordion.prototype.collapseAllAccordions = function () {

    // For each accordion...
    for (let i = 0; i < this.accordions.length; i++) {

      // Close it.
      this.accordionOpen(this.accordions[i], false);
    }
  }

  // Check if an accordion is open by inspecting the aria attribute of the 'btn' controlling it.
  // Returns a boolean.
  Accordion.prototype.isAccordionOpen = function (btn) {
    return btn.getAttribute('aria-expanded') === 'true' || false;
  }

  // Toggle a specific 'accordion' open or closed.
  Accordion.prototype.toggleAccordion = function (accordion) {
    // Get the accordion's button element.
    let btn = accordion.querySelector('button');

    // Check if the accordion is currently expanded at moment of click.
    let expanded = this.isAccordionOpen(btn);

    // Checks if multiple accordions can be open at once. If not, closes other accordions.
    if (!this.multiSelectible && !expanded) {
      this.collapseAllAccordions();
    }

    // Toggle the accordion.
    this.accordionOpen(accordion, !expanded)

    // If the accordion is not open (but will be)...
    if (!expanded) {

      // Define historyString here to be used later.
      let historyString = '#' + btn.parentElement.id;

      // Change window location to add URL params
      if (window.history && history.pushState && historyString !== '#') {
        // NOTE: doesn't take into account existing params
        history.replaceState("", "", historyString);
      }
    }

    // Else if the accordion is closed...
    else {

      // Empty the history string.
      history.replaceState("", "", " ");
    }
  }

  // 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: 5.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;
      color: $secondary;
      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.7 KB