<div class="accordion-wrapper">
  <ul>
    <li>
      <h2 class="accordion-title">
        Account Management
        <button type="button" class="btn-close" href="" aria-label="Close first panel" title="Close first panel">
          <svg width="32" height="32" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="m11 11h-7.25c-.414 0-.75.336-.75.75s.336.75.75.75h7.25v7.25c0 .414.336.75.75.75s.75-.336.75-.75v-7.25h7.25c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-7.25v-7.25c0-.414-.336-.75-.75-.75s-.75.336-.75.75z" fill-rule="nonzero" />
          </svg>
        </button>
      </h2>
      <div class="accordion-content">
        <div class="inner">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis aliquid possimus aspernatur quis nemo saepe ipsum rerum vitae. Velit tenetur doloribus beatae inventore praesentium aperiam libero voluptates possimus modi dolore!</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis aliquid possimus aspernatur quis nemo saepe ipsum rerum vitae. Velit tenetur doloribus beatae inventore praesentium aperiam libero voluptates possimus modi dolore!</p>
          <a href="">Button</a>
        </div>
      </div>
    </li>
    <li>
      <h2 class="accordion-title">
        Resources
        <button type="button" class="btn-close" href="" aria-label="Close second panel" title="Close second panel">
          <svg width="32" height="32" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="m11 11h-7.25c-.414 0-.75.336-.75.75s.336.75.75.75h7.25v7.25c0 .414.336.75.75.75s.75-.336.75-.75v-7.25h7.25c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-7.25v-7.25c0-.414-.336-.75-.75-.75s-.75.336-.75.75z" fill-rule="nonzero" />
          </svg>
        </button>
      </h2>
      <div class="accordion-content">
        <div class="inner">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis aliquid possimus aspernatur quis nemo saepe ipsum rerum vitae. Velit tenetur doloribus beatae inventore praesentium aperiam libero voluptates possimus modi dolore!</p>
          <a href="">Button</a>
        </div>
      </div>
    </li>
    <li>
      <h2 class="accordion-title">
        Strategy
        <button type="button" class="btn-close" href="" aria-label="Close third panel" title="Close third panel">
          <svg width="32" height="32" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="m11 11h-7.25c-.414 0-.75.336-.75.75s.336.75.75.75h7.25v7.25c0 .414.336.75.75.75s.75-.336.75-.75v-7.25h7.25c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-7.25v-7.25c0-.414-.336-.75-.75-.75s-.75.336-.75.75z" fill-rule="nonzero" />
          </svg>
        </button>
      </h2>
      <div class="accordion-content">
        <div class="inner">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis aliquid possimus aspernatur quis nemo saepe ipsum rerum vitae. Velit tenetur doloribus beatae inventore praesentium aperiam libero voluptates possimus modi dolore!</p>
          <a href="">Button</a>
        </div>
      </div>
    </li>
    <li>
      <h2 class="accordion-title">
        Shopping
        <button type="button" class="btn-close" href="" aria-label="Close fourth panel" title="Close fourth panel">
          <svg width="32" height="32" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="m11 11h-7.25c-.414 0-.75.336-.75.75s.336.75.75.75h7.25v7.25c0 .414.336.75.75.75s.75-.336.75-.75v-7.25h7.25c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-7.25v-7.25c0-.414-.336-.75-.75-.75s-.75.336-.75.75z" fill-rule="nonzero" />
          </svg>
        </button>
      </h2>
      <div class="accordion-content">
        <div class="inner">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis aliquid possimus aspernatur quis nemo saepe ipsum rerum vitae. Velit tenetur doloribus beatae inventore praesentium aperiam libero voluptates possimus modi dolore!</p>
          <a href="">Button</a>
        </div>
      </div>
    </li>
  </ul>
</div>

<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>
/* BASIC STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap");

:root {
  --white: #fff;
  --light-cyan: #edf6f9;
  --button-bg-color: #ff6b6b;
  --button-bg-hover-color: #ff5151;
  --accordion-bg-color: #ffddd2;
  --accordion-bg-hover-color: #ffd5c8;
  --accordion-active-bg-color: #1982c4;
  --accordion-radius: 50px;
}

* {
  box-sizing: border-box;
}

body {
  font: 20px/1.5 "Jost", sans-serif;
  margin: 50px 0;
}

/* ACCORDION STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.accordion-wrapper {
  max-width: 1000px;
  padding: 0 20px;
  margin: 0 auto;
}

.accordion-wrapper ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.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 li:hover {
  background: var(--accordion-bg-hover-color);
}

.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 .accordion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.2;
  padding: 40px 0;
  margin: 0;
}

.accordion-wrapper .accordion-title button {
  cursor: pointer;
  background: none;
  border: none;
}

.accordion-wrapper li svg {
  transition: all 0.35s ease-out;
}

.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;
}

.accordion-wrapper .inner a {
  display: inline-block;
  border-radius: 30px;
  padding: 14px 20px;
  text-decoration: none;
  min-width: 120px;
  line-height: 1;
  text-align: center;
  color: var(--white);
  background: var(--button-bg-color);
  transition: background 0.3s;
}

.accordion-wrapper .inner a:hover {
  background: var(--button-bg-hover-color);
}

.accordion-wrapper .inner *:first-child {
  margin-top: 0;
}

.accordion-wrapper li.active svg {
  fill: var(--white);
  transform: rotate(-45deg);
}

@media (min-width: 700px) {
  .accordion-wrapper li {
    padding-left: 60px;
    padding-right: 60px;
  }

  .accordion-wrapper .inner {
    max-width: 85%;
  }
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  font-size: 0.75em;
  background: var(--white);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}
const accordionWrapper = document.querySelector(".accordion-wrapper");
const items = accordionWrapper.querySelectorAll("li");
const activeItems = accordionWrapper.querySelectorAll("li.active");
const multiple_open = accordionWrapper.dataset.multiple;
const ACTIVE_CLASS = "active";

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

items.forEach(function (item) {
  item.addEventListener("click", function (e) {
    const target = e.target;
    if (
      (target.tagName.toLowerCase() === "button" || target.closest("button")) &&
      item.classList.contains(ACTIVE_CLASS)
    ) {
      item.classList.remove(ACTIVE_CLASS);
      return;
    }

    if (
      "true" !== multiple_open &&
      document.querySelector(".accordion-wrapper li.active")
    ) {
      document
        .querySelector(".accordion-wrapper li.active")
        .classList.remove(ACTIVE_CLASS);
    }

    item.classList.add(ACTIVE_CLASS);

    const content = item.querySelector(".accordion-content");
    content.style.height = `${content.scrollHeight}px`;
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js