Accordion Joined

                    <section class="max-w-lg mx-auto p-6">
  <div class="flex flex-col divide-y divide-gray-200 border border-gray-200 rounded-lg overflow-hidden">
    <!-- Joined Accordion item 1 -->
    <div class="bg-white 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)">
        <span>How do I create an account?</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform duration-300" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </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>

    <!-- Joined Accordion item 2 -->
    <div class="bg-white 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)">
        <span>I forgot my password. What should I do?</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform duration-300" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </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>

    <!-- Joined Accordion item 3 -->
    <div class="bg-white 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)">
        <span>How do I update my profile information?</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform duration-300" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </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>