Accordion Basic

                    <section class="max-w-lg mx-auto p-6">
  <div class="flex flex-col gap-2">
    <!-- Accordion item 1 -->
    <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="toggleAccordion(this)">
        How do I create an account?
        <svg class="w-5 h-5 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </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 -->
    <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="toggleAccordion(this)">
        I forgot my password. What should I do?
        <svg class="w-5 h-5 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </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 -->
    <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="toggleAccordion(this)">
        How do I update my profile information?
        <svg class="w-5 h-5 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </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 toggleAccordion(button) {
  const content = button.nextElementSibling;
  const icon = button.querySelector('svg');
  
  // Toggle max-height
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
    icon.style.transform = 'rotate(0deg)';
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
    icon.style.transform = 'rotate(180deg)';
  }
}
</script>