Collapse Accordion

                    <section class="p-6 max-w-md mx-auto">
  <div class="accordion-group rounded-md overflow-hidden border border-gray-300 divide-y divide-gray-300">
    <div class="accordion-item">
      <button onclick="toggleAccordionItem(this)" class="w-full flex justify-between items-center p-4 font-semibold text-left hover:bg-gray-50 focus:outline-none">
        <span>How do I create an account?</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transform transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      <div class="max-h-0 overflow-hidden transition-all duration-300 bg-gray-50">
        <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="accordion-item">
      <button onclick="toggleAccordionItem(this)" class="w-full flex justify-between items-center p-4 font-semibold text-left hover:bg-gray-50 focus:outline-none">
        <span>What payment methods do you accept?</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transform transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      <div class="max-h-0 overflow-hidden transition-all duration-300 bg-gray-50">
        <div class="p-4 text-sm">
          We accept all major credit cards, PayPal, and bank transfers. For certain countries, we also offer local payment options.
        </div>
      </div>
    </div>
    
    <div class="accordion-item">
      <button onclick="toggleAccordionItem(this)" class="w-full flex justify-between items-center p-4 font-semibold text-left hover:bg-gray-50 focus:outline-none">
        <span>Is my data secure?</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transform transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
      </button>
      <div class="max-h-0 overflow-hidden transition-all duration-300 bg-gray-50">
        <div class="p-4 text-sm">
          Yes, we take data security very seriously. We use industry-standard encryption and never share your personal information with third parties without your explicit consent.
        </div>
      </div>
    </div>
  </div>
</section>

<script>
function toggleAccordionItem(button) {
  const currentItem = button.parentElement;
  const currentContent = button.nextElementSibling;
  const currentIcon = button.querySelector('svg');
  
  const accordionGroup = currentItem.parentElement;
  const allItems = accordionGroup.querySelectorAll('.accordion-item');
  
  allItems.forEach(item => {
    if (item !== currentItem) {
      const content = item.querySelector('div');
      const icon = item.querySelector('svg');
      
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
        icon.style.transform = 'rotate(0deg)';
      }
    }
  });

  if (currentContent.style.maxHeight) {
    currentContent.style.maxHeight = null;
    currentIcon.style.transform = 'rotate(0deg)';
  } else {
    currentContent.style.maxHeight = currentContent.scrollHeight + "px";
    currentIcon.style.transform = 'rotate(180deg)';
  }
}

window.addEventListener('DOMContentLoaded', () => {
  const firstButton = document.querySelector('.accordion-item button');
  if (firstButton) {
    toggleAccordionItem(firstButton);
  }
});
</script>