Expand & collapse

expand.js

// Expand/collapse section
const toggleCollapse = (e) => {
    const header = e.target;
    const contentId = header.getAttribute("data-section");
    if (contentId) {
        const content = document.getElementById(contentId);
        if (content.classList.contains("is-active")) {
            content.style.maxHeight = "";
        } else {
            content.style.maxHeight = content.scrollHeight + 500 + "px"; // Add 500 to account for changing viewport size
        }
        content.classList.toggle("is-active");
        header.classList.toggle("is-active");
        header.setAttribute(
            "aria-expanded",
            header.classList.contains("is-active") ? "true" : "false"
        );
    }
};

const expandLinks = document.querySelectorAll(".expand-section-link");

expandLinks.forEach((h) => {
    h.addEventListener("click", toggleCollapse);
});

expand.scss

html {
   font-size: 16px;
}

body {
   color: #333;
   background: #eee;
}

.container {
   max-width: 600px;
   margin: 2rem auto 0;
   padding: 20px;
}

.box {
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 0 0.5em 1em -0.125em rgba(#000, 0.1),
      0 0px 0 1px rgba(#000, 0.02);
   color: #333;
   display: block;
   margin-bottom: 1rem;
   padding: 1.5rem;

   &:last-of-type {
      margin-bottom: 0;
   }
}

p {
   margin-bottom: 1rem;

   &:last-of-type {
      margin-bottom: 0;
   }
}

// Expand element(s)

.expand-section-link {
   color: #000;
   max-width: 100%;
   position: relative;
   margin-bottom: 0;
   padding-right: 2rem;
   font-weight: 600;
   cursor: pointer;

   @media (min-width: 769px) {
      padding-top: 0;
   }

   &::after {
      border: 3px solid #000;
      border-radius: 2px;
      border-right: 0;
      border-top: 0;
      content: " ";
      display: block;
      height: 0.625em;
      margin-top: -0.4375em;
      pointer-events: none;
      position: absolute;
      top: 50%;
      transform: rotate(-45deg);
      transform-origin: center;
      width: 0.625em;
      right: 0;
      z-index: 4;
      transition: transform 0.2s ease-in-out;
   }

   &.is-active {
      color: #007ac1;

      // rotate arrow
      &::after {
         border-color: #007ac1;
         transform: rotate(135deg);
         top: 60%;
      }
   }
}

.expand-section {
   max-height: 0;
   overflow-y: hidden;
   transition: max-height 0.2s ease-in-out;

   &.is-active {
      max-height: none;
      transition: max-height 0.2s ease-in-out;
   }
}

index.html

<div class="container">
    <div class="box">
        <div class="expand-section-link" data-section="section-1" aria-expanded="false">
            This is the clickable section header
        </div>
        <div id="section-1" class="expand-section">
            <div class="expand-content">
                <p>This is the content.</p>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="expand-section-link" data-section="section-2" aria-expanded="false">
            This is the clickable section header
        </div>
        <div id="section-2" class="expand-section">
            <div class="expand-content">
                <p>This is the content.</p>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="expand-section-link" data-section="section-3" aria-expanded="false">
            This is the clickable section header
        </div>
        <div id="section-3" class="expand-section">
            <div class="expand-content">
                <p>This is the content.</p>
            </div>
        </div>
    </div>
</div>