Accordion - Design

Accordions seperate and condense information into multiple collapse sections.

Live Demo

Something small enough to escape casual notice.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quo magnam perspiciatis placeat. Omnis at ratione dolorum sunt! Aliquid dolores accusamus est beatae quam. Placeat quidem alias officiis itaque at illum, dolorem a odio corporis aperiam impedit asperiores commodi beatae est reprehenderit velit et eum! Ducimus, doloribus. Sapiente commodi quos nostrum, magnam eveniet totam beatae nam repudiandae, incidunt, mollitia nulla vero dignissimos pariatur sit laboriosam ratione ea rerum. Distinctio maiores aut sequi accusantium veniam neque commodi aliquam ipsum eligendi explicabo et sit facere labore impedit non ut dolor blanditiis repellat modi corporis fugiat, a alias vel voluptatibus? Voluptatibus, quisquam alias?

Something small enough to escape casual notice.

Hi 😁 -Logan

Something small enough to escape casual notice.

Usage

Accordions are used when there is a lot of information that a user doesn't need to see all at once. They are basically just a group of collapses, but what makes it an accordion is that only one should be open at a time. There is a configuration where you can open multiple, but by default it should close any other open accordion when you open a different one. The content of accordions should be organized and divided into sections that make sense, such as "Description" or "Size Chart".

Anatomy

1. Accordion Group
2. Accordion, Closed
3. Accordion Header
4. Accordion, Open
5. Accordion detail panel
6. Detail text body

Behavior

Accordions stretch horizontally to fit their container, and the detail panel scales vertically to fit its content.

Accordion - Implementation

Accordions seperate and condense information into multiple collapse sections.

Implementation

<div class="accordionManager">
    <details class="accordion">
      <summary class="accordion__header">Details 1</summary>
      <div class="accordion__content">Something small enough to escape casual notice.</div>
    </details>
    <details class="accordion">
      <summary class="accordion__header">Details 2</summary>
      <div class="accordion__content">Something small enough to escape casual notice.</div>
    </details>
    <details class="accordion">
      <summary class="accordion__header">Details 3</summary>
      <div class="accordion__content">Something small enough to escape casual notice.</div>
    </details>
    <details class="accordion">
      <summary class="accordion__header">Details 4</summary>
      <div class="accordion__content">Something small enough to escape casual notice.</div>
    </details>
    <details class="accordion">
      <summary class="accordion__header">Details 5</summary>
      <div class="accordion__content">Something small enough to escape casual notice.</div>
    </details>
    <details class="accordion">
      <summary class="accordion__header">Details 6</summary>
      <div class="accordion__content">Something small enough to escape casual notice.</div>
    </details>
  </div>
  <script>
    class AccordionManager {
      constructor() {
        this.accordionManager = document.querySelector(".accordionManager");
        this.accordions = Array.from(this.accordionManager.querySelectorAll(".accordion"));
        this.openAccordion = null;
        this.handleClick = this.handleClick.bind(this);
        this.accordionManager.addEventListener("click", this.handleClick)
      }
      handleClick() {
        let t = event.target;
        if(!t.matches(".accordion__header")){return}
        if(this.openAccordion && t.closest(".accordion") != this.openAccordion) {
          this.openAccordion.open = false;
        }
        this.openAccordion = t.closest(".accordion");
      }
    }
    const am = new AccordionManager;
  </script>

.accordionManager {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.accordion {
    margin: 0 0 8px;
    border-radius: 3px;
}

.accordion__header {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 8px;
    background: #fff;
    border: 1px solid #c5c5c7;
    border-radius: 3px;
    overflow: hidden;
}

.accordion__content {
    padding: 8px;
    font-size: .875rem;
    border: 1px solid #c5c5c7;
    border-top: none;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    font-weight: 400;
    background-color: #fff;
}

.accordion[open] .accordion__header {
    background-color: #eee;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

Contents

Live Demo Usage Anatomy Behavoir

Basic Implementation