Build an animated JavaScript accordion component, with overlapping panels

In this new tutorial, we’ll learn how to build an animated JavaScript accordion component with overlapping panels.

We won’t focus so much on accessibility in this tutorial, so exploring how to make this component more accessible would be a valid next step.

Our accordion component

Here’s what we’re going to create (click on a panel to test the behavior):

<br />

1. Begin with the page markup

Inside a container, we’ll place a list of panels.

Each panel will have a title and content. Within the title, we’ll add a Close button from where we can close the active panel.

Here’s the required structure:

<div class="accordion-wrapper">
  <ul>
    <li>
      <h2 class="accordion-title">...</h2>
      <div class="accordion-content">
        <div class="inner">...</div>
      </div>
    </li>
    <li>
      <h2 class="accordion-title">...</h2>
      <div class="accordion-content">
        <div class="inner">...</div>
      </div>
    </li>
    <li>
      <h2 class="accordion-title">...</h2>
      <div class="accordion-content">
        <div class="inner">...</div>
      </div>
    </li>
    <li>
      <h2 class="accordion-title">...</h2>
      <div class="accordion-content">
        <div class="inner">...</div>
      </div>
    </li>
  </ul>
</div>

Initial accordion state/active items

By default, all panels will be collapsed.

To prevent this behavior, we’ve to assign the active class to one or more panels like this:

1	<ul>
2	<li class="active">...</li>
3	</ul>

Multiple open panels

There’s also the option to have more than one panel open simultaneously without one collapsing when the other is open. To enable this, we should add the data-multiple="true" attribute to the accordion wrapper like this:

1	<div class="accordion-wrapper" data-multiple="true">...</div>

Our accordion with multiple panels being open at the same time

Let’s now concentrate on the key styles—most of the other styles aren’t anything special, so let’s leave them for now:

To make the panels overlap and create a different accordion layout compared to the standard ones, we’ll give them a negative top margin and an equal bottom padding. Only for the first and last items, we’ll cancel the top margin and bottom padding respectively.

To hide the content of each panel, we’ll give them height: 0 and overflow: hidden. Then, as we’ll see later, through JavaScript, we’ll recalculate their height and reveal them smoothly. Just, note that we’ll also use height: 0 !important to reset the height to 0 and override the JavaScript styles for a previously active panel.

To open the modal, the whole panel area will be clickable. To make it clear, we’ll assign cursor: pointer to all panels. On the contrary, when a panel is open, we can close it only via the close button. At this moment, only this button will have cursor: pointer while the panel will have cursor: default.

Here’s a part of the required styles:

/*CUSTOM STYLES HERE*/

.accordion-wrapper li {
  padding: 0 20px 100px;
  cursor: pointer;
  border-top-left-radius: var(--accordion-radius);
  border-top-right-radius: var(--accordion-radius);
  background: var(--accordion-bg-color);
  transition: all 0.2s ease-out;
}

.accordion-wrapper li:not(:first-child) {
  margin-top: -100px;
  border-top: 2px solid var(--light-cyan);
}

.accordion-wrapper li:nth-last-child(2),
.accordion-wrapper li:last-child {
  border-bottom-left-radius: var(--accordion-radius);
  border-bottom-right-radius: var(--accordion-radius);
}

.accordion-wrapper li:last-child {
  padding-bottom: 0;
}

.accordion-wrapper:not([data-multiple="true"]) li.active {
  border-top-color: var(--accordion-active-bg-color);
}

.accordion-wrapper li.active {
  cursor: default;
  color: var(--white);
  background: var(--accordion-active-bg-color);
}

.accordion-wrapper li:not(.active) .accordion-content {
  height: 0 !important;
}

.accordion-wrapper .accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.accordion-wrapper .inner {
  padding-bottom: 40px;
}

@media (min-width: 700px) {
  .accordion-wrapper li {
    padding-left: 60px;
    padding-right: 60px;
  }

  .accordion-wrapper .inner {
    max-width: 85%;
  }
}

3. Add the JavaScript

The way we’ll animate each panel and achieve a slide effect similar to jQuery’s slideToggle() function is by taking advantage of the scrollHeight property.

This property measures the height of an element’s content, including content not visible on the screen due to overflow. In our case, we’ll need to calculate that value for the .accordion-content elements which have height: 0 and overflow: hidden by default.

When DOM ready

As a first action, when the DOM is ready, we’ll check if there are any active panels, and if so, we’ll set the height for the .accordion-content element of each active panel equal to its scrollHeight property value.

Here’s the related JavaScript code:

const activeItems = accordionWrapper.querySelectorAll("li.active");

if (activeItems) {
  activeItems.forEach(function (item) {
    const content = item.querySelector(".accordion-content");
    content.style.height = `${content.scrollHeight}px`;
  });
}

Toggle accordion panels

Next, each time we click on a panel, we’ll do the following things:

Check if we clicked on the close button. If that happens and the panel is open, we’ll close it by removing the active class and ignoring all the next steps.

Check if we’ve set the option to have multiple panels open together. If that isn’t the case and there’s an active panel, we’ll close it.

Add the active class to that panel.

Set the height for the .accordion-content element of this panel equal to its scrollHeight property value.

Here’s the JavaScript code that implements all that behavior:

const accordionWrapper = document.querySelector(".accordion-wrapper");
const items = accordionWrapper.querySelectorAll("li");
const multiple_open = accordionWrapper.dataset.multiple;
const ACTIVE_CLASS = "active";

items.forEach(function (item) {
  item.addEventListener("click", function (e) {
    // 1
    const target = e.target;
    if (
      (target.tagName.toLowerCase() === "button" || target.closest("button")) &&
      item.classList.contains(ACTIVE_CLASS)
    ) {
      item.classList.remove(ACTIVE_CLASS);
      return;
    }
    
    // 2
    if (
      "true" !== multiple_open &&
      document.querySelector(".accordion-wrapper li.active")
    ) {
      document
        .querySelector(".accordion-wrapper li.active")
        .classList.remove(ACTIVE_CLASS);
    }
    
    // 3
    item.classList.add(ACTIVE_CLASS);

    // 4
    const content = item.querySelector(".accordion-content");
    content.style.height = `${content.scrollHeight}px`;
  });
});

Conclusion

Done! I hope you enjoyed the JavaScript accordion we built and learned one or two new things.

Before closing, let’s recall our main creation today: