Accordion

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/solid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/regular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/fontawesome.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bf-accordion">
  <div class="bf-accordion-item bf-accordion-item-active">
    <div class="bf-accordion-item-title">
      <button type="button">
        <span class="bf-accordion-item-angle-circle">
          <i class="fa-solid fa-angle-right bf-accordion-item-angle"></i>
        </span>
        <span>Thor about Loki</span>
      </button>
    </div>
    <div class="bf-accordion-item-content">
      There was one time when we were children, he transformed himself into a
      snake, and he knows that I love snakes. So, I went to pick up the snake to
      admire it, and he transformed back into himself and he was like, "Yeah,
      it's me!" And he stabbed me. We were eight at the time.
    </div>
  </div>
  <div class="bf-accordion-item">
    <div class="bf-accordion-item-title">
      <button type="button">
        <span class="bf-accordion-item-angle-circle">
          <i class="fa-solid fa-angle-right bf-accordion-item-angle"></i>
        </span>
        <span>Strange conversation</span>
      </button>
    </div>
    <div hidden class="bf-accordion-item-content">
      <strong>Thor:</strong> If you knew where he was, why didn’t you call me?
      <br />
      <strong>Dr. Strange:</strong> I have to tell you, he was adamant that he
      not be disturbed. Your father said he had chosen to remain in exile. And
      you don’t have a phone.
      <br />
      <strong>Thor</strong>: No, I don’t have a phone, but you could have sent
      an electronic letter. It’s called an email.
      <br />
      <strong>Dr. Strange:</strong> Yeah, do you have a computer?
      <br />
      <strong>Thor:</strong> No. What for?
    </div>
  </div>
</div>

<script>
  document.querySelectorAll(".bf-accordion-item").forEach((item) => {
    const btn = item.querySelector(".bf-accordion-item-title > button");
    const content = item.querySelector(".bf-accordion-item-content");
    btn.addEventListener("click", () => {
      const isActive = item.classList.contains("bf-accordion-item-active");
      item.classList.toggle("bf-accordion-item-active");
      content.hidden = isActive;
    });
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/solid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/regular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/fontawesome.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bf-accordion">
  <div class="bf-accordion-item bf-accordion-item-active">
    <div class="bf-accordion-item-title">
      <button type="button">
        <span class="bf-accordion-item-angle-circle">
          <i class="fa-solid fa-angle-right bf-accordion-item-angle"></i>
        </span>
        <span>Thor about Loki</span>
      </button>
    </div>
    <div class="bf-expand">
      <div>
        <div class="bf-accordion-item-content">
          There was one time when we were children, he transformed himself into
          a snake, and he knows that I love snakes. So, I went to pick up the
          snake to admire it, and he transformed back into himself and he was
          like, "Yeah, it's me!" And he stabbed me. We were eight at the time.
        </div>
      </div>
    </div>
  </div>
  <div class="bf-accordion-item">
    <div class="bf-accordion-item-title">
      <button type="button">
        <span class="bf-accordion-item-angle-circle">
          <i class="fa-solid fa-angle-right bf-accordion-item-angle"></i>
        </span>
        <span>Strange conversation</span>
      </button>
    </div>
    <div class="bf-expand bf-expand-closed">
      <div>
        <div class="bf-accordion-item-content">
          <strong>Thor:</strong> If you knew where he was, why didn’t you call
          me?
          <br />
          <strong>Dr. Strange:</strong> I have to tell you, he was adamant that
          he not be disturbed. Your father said he had chosen to remain in
          exile. And you don’t have a phone.
          <br />
          <strong>Thor</strong>: No, I don’t have a phone, but you could have
          sent an electronic letter. It’s called an email.
          <br />
          <strong>Dr. Strange:</strong> Yeah, do you have a computer?
          <br />
          <strong>Thor:</strong> No. What for?
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.querySelectorAll(".bf-accordion-item").forEach((item) => {
    const btn = item.querySelector(".bf-accordion-item-title > button");
    const content = item.querySelector(".bf-expand");
    btn.addEventListener("click", () => {
      const isActive = item.classList.contains("bf-accordion-item-active");
      item.classList.toggle("bf-accordion-item-active");
      content.classList.toggle("bf-expand-closed");
    });
  });
</script>