Accordion Plus

                    <section class="max-w-lg mx-auto p-6">
  <div class="flex flex-col gap-2">
    <!-- Accordion item 1 with plus/minus -->
    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
      <button class="w-full bg-gray-50 p-4 font-medium text-gray-800 hover:bg-gray-100 flex justify-between items-center" onclick="togglePlusAccordion(this)">
        <span>How do I create an account?</span>
        <div class="relative w-5 h-5">
          <!-- Plus/Minus icon -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
            <!-- Horizontal line (always visible) -->
            <rect x="6" y="11" width="12" height="2" fill="currentColor" />
            <!-- Vertical line (hidden when expanded) -->
            <rect x="11" y="6" width="2" height="12" fill="currentColor" class="vertical-line transition-opacity duration-300" />
          </svg>
        </div>
      </button>
      <div class="max-h-0 overflow-hidden transition-all duration-300">
        <div class="p-4 text-gray-600 text-sm">
          <p>Click the "Sign Up" button in the top right corner and follow the registration process.</p>
        </div>
      </div>
    </div>

    <!-- Accordion item 2 with plus/minus -->
    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
      <button class="w-full bg-gray-50 p-4 font-medium text-gray-800 hover:bg-gray-100 flex justify-between items-center" onclick="togglePlusAccordion(this)">
        <span>I forgot my password. What should I do?</span>
        <div class="relative w-5 h-5">
          <!-- Plus/Minus icon -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
            <!-- Horizontal line (always visible) -->
            <rect x="6" y="11" width="12" height="2" fill="currentColor" />
            <!-- Vertical line (hidden when expanded) -->
            <rect x="11" y="6" width="2" height="12" fill="currentColor" class="vertical-line transition-opacity duration-300" />
          </svg>
        </div>
      </button>
      <div class="max-h-0 overflow-hidden transition-all duration-300">
        <div class="p-4 text-gray-600 text-sm">
          <p>Click on "Forgot Password" on the login page and follow the instructions sent to your email.</p>
        </div>
      </div>
    </div>

    <!-- Accordion item 3 with plus/minus -->
    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
      <button class="w-full bg-gray-50 p-4 font-medium text-gray-800 hover:bg-gray-100 flex justify-between items-center" onclick="togglePlusAccordion(this)">
        <span>How do I update my profile information?</span>
        <div class="relative w-5 h-5">
          <!-- Plus/Minus icon -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
            <!-- Horizontal line (always visible) -->
            <rect x="6" y="11" width="12" height="2" fill="currentColor" />
            <!-- Vertical line (hidden when expanded) -->
            <rect x="11" y="6" width="2" height="12" fill="currentColor" class="vertical-line transition-opacity duration-300" />
          </svg>
        </div>
      </button>
      <div class="max-h-0 overflow-hidden transition-all duration-300">
        <div class="p-4 text-gray-600 text-sm">
          <p>Go to "My Account" settings and select "Edit Profile" to make changes.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
function togglePlusAccordion(button) {
  const content = button.nextElementSibling;
  const verticalLine = button.querySelector('.vertical-line');
  
  // Toggle max-height
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
    verticalLine.style.opacity = '1'; // Show vertical line (plus sign)
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
    verticalLine.style.opacity = '0'; // Hide vertical line (minus sign)
  }
}
</script>