Brown Markup Library

<div class="accordion-container-wrapper">
    <button
        aria-controls="{unique-identifier}-content-container"
        aria-expanded={state of toggle: true || false}
        type="button"
        class="accordion-container-button"
        onclick={js function to change toggle state}
        id={unique-identifier}
    >
        Display Name
    </button>
    <div
        id="{unique-identifier}-content-container"
        class="accordion-container-content-container"
    >
        <p>I am the hidden content.</p>
    </div>
</div>

.accordion-container-button {
  background: transparent;
  border: 0;
  color: #434343;
  cursor: pointer;
  font-family: CircularStd, Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  position: relative;
  padding: 24px 47px 23px 30px;
  text-align: left;
  width: 100%;
}
.accordion-container-button:after {
  height: 1px;
  width: 17px;
  position: absolute;
  top: 50%;
  left: 0;
  background: #c00404;
  content: "";
  transform: translateY(-50%);
  transform: translateY(-50%) rotate(90deg) scaleX(1);
}
.accordion-container-button:before {
  height: 1px;
  width: 17px;
  position: absolute;
  top: 50%;
  left: 0;
  background: #c00404;
  content: "";
  transform: translateY(-50%);
}
.accordion-container-button:hover {
  color: #c00404;
}
.accordion-container-button-open:after {
  transform: translateY(-50%);
}
.accordion-container-content-container {
  height: 0;
  opacity: 0;
}
.accordion-container-content-container-open {
    height: 0;
    opacity: 0;
    height: fit-content;
    opacity: 1;
}
.accordion-container-wrapper {
  width: 100%;
  border-bottom: 1px solid rgb(240, 243, 245);
}
@media screen and (prefers-reduced-motion: no-preference) {
    .accordion-container-button {
      transition: color 0.25s;
    }
    .accordion-container-button:after {
      transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    .accordion-container-button-open:after {
      transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    .accordion-container-content-container-open {
        transition: all 0.45s ease;
    }
}

<script>
  function toggleContainer(id) {
    const child = document.getElementById("accordion-container-content-container");
    const button = document.getElementById(id);
    if (child.classList.contains("accordion-container-content-container-open")) {
      child.classList.remove("accordion-container-content-container-open");
      button.classList.remove("accordion-container-button-open");
      button.setAttribute("aria-expanded", "false");
    } else {
      child.classList.add("accordion-container-content-container-open");
      button.classList.add("accordion-container-button-open");
      button.setAttribute("aria-expanded", "true");
    };
  };
</script>