<div class="accordion-container">
  <button class="accordion">
    <span>Question 1</span>
    <span class="icon">+</span>
  </button>
  <div class="panel">
    <p>Answer to question 1 goes here.</p>
  </div>

  <button class="accordion">
    <span>Question 2</span>
    <span class="icon">+</span>
  </button>
  <div class="panel">
    <p>Answer to question 2 goes here.</p>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const accordions = document.querySelectorAll(".accordion");

    accordions.forEach(accordion => {
      accordion.addEventListener("click", function () {
        this.classList.toggle("active");

        const panel = this.nextElementSibling;
        const icon = this.querySelector(".icon");

        if (panel.style.display === "block") {
          panel.style.display = "none";
          icon.textContent = "+";
        } else {
          panel.style.display = "block";
          icon.textContent = "-";
        }
      });
    });
  });
</script>