Collapse Plus

                    <section class="p-6 max-w-md mx-auto">
  <div class="border border-gray-300 bg-white rounded-md overflow-hidden">
    <button onclick="toggleCollapsePlus(this)" class="w-full p-4 font-semibold text-left flex justify-between items-center hover:bg-gray-50 focus:outline-none">
      <span>How do I create an account?</span>
      <span class="relative flex items-center justify-center w-5 h-5">
        <span class="absolute w-5 h-0.5 bg-current"></span>
        <span class="absolute w-0.5 h-5 bg-current transition-transform duration-300 vertical-line"></span>
      </span>
    </button>
    
    <div class="max-h-0 overflow-hidden transition-all duration-300">
      <div class="p-4 text-sm">
        Click the "Sign Up" button in the top right corner and follow the registration process.
      </div>
    </div>
  </div>
  
  <div class="mt-4 border border-gray-300 bg-white rounded-md overflow-hidden">
    <button onclick="toggleCollapsePlus(this)" class="w-full p-4 font-semibold text-left flex justify-between items-center hover:bg-gray-50 focus:outline-none">
      <span>How do I contact customer support?</span>
      <span class="relative flex items-center justify-center w-5 h-5">
        <span class="absolute w-5 h-0.5 bg-current"></span>
        <span class="absolute w-0.5 h-5 bg-current transition-transform duration-300 vertical-line"></span>
      </span>
    </button>
    
    <div class="max-h-0 overflow-hidden transition-all duration-300">
      <div class="p-4 text-sm">
        You can contact our customer support team through the "Help" section in your account or by sending an email to [email protected].
      </div>
    </div>
  </div>
</section>

<script>
function toggleCollapsePlus(button) {
  const content = button.nextElementSibling;
  const verticalLine = button.querySelector('.vertical-line');
  
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
    verticalLine.style.transform = 'rotate(0deg)';
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
    verticalLine.style.transform = 'rotate(90deg)';
  }
}
</script>