Tailwind CSS Collapse Components

                            <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>
                        

                            <section class="p-6 max-w-md mx-auto">
  <!-- 基础折叠组件 - 使用focus触发 -->
  <div tabindex="0" class="border border-gray-300 bg-white rounded-md overflow-hidden cursor-pointer group">
    <!-- 标题部分 -->
    <div class="p-4 font-semibold">
      How do I create an account?
    </div>
    
    <!-- 内容部分 - 初始隐藏，focus时显示 -->
    <div class="px-4 pb-4 pt-0 text-sm max-h-0 group-focus:max-h-96 overflow-hidden transition-all duration-300 group-focus:pt-2">
      Click the "Sign Up" button in the top right corner and follow the registration process.
    </div>
  </div>
</section>

<style>
  /* 添加必要的样式，使用纯CSS实现折叠效果 */
  div[tabindex="0"]:focus div:last-child {
    max-height: 100px;
    padding-top: 0.5rem;
  }
</style> 
                        

                            <section class="p-6 max-w-md mx-auto">
  <!-- 使用details和summary标签的折叠组件 -->
  <details class="border border-gray-300 bg-white rounded-md overflow-hidden group">
    <!-- 标题部分 (summary标签) -->
    <summary class="p-4 font-semibold cursor-pointer list-none">
      How do I create an account?
    </summary>
    
    <!-- 内容部分 -->
    <div class="px-4 pb-4 text-sm">
      Click the "Sign Up" button in the top right corner and follow the registration process.
    </div>
  </details>
</section>

<style>
  /* 移除details的默认标记 */
  details > summary::-webkit-details-marker,
  details > summary::marker {
    display: none;
  }
</style> 
                        

                            <section class="p-6 max-w-md mx-auto space-y-4">
  <div class="bg-blue-500 text-white rounded-md overflow-hidden" id="blue-collapse">
    <button onclick="toggleBlueCollapse(this)" class="w-full p-4 font-semibold text-left hover:bg-blue-600 focus:outline-none flex justify-between items-center">
      <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">
      <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="bg-green-500 text-white rounded-md overflow-hidden" id="green-collapse">
    <!-- 标题部分 -->
    <button onclick="toggleGreenCollapse(this)" class="w-full p-4 font-semibold text-left hover:bg-green-600 focus:outline-none flex justify-between items-center">
      <span>How do I contact customer support?</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">
      <div class="p-4 text-sm">
        You can contact our support team via email at [email protected] or through the contact form on our website.
      </div>
    </div>
  </div>
  
  <div class="bg-red-500 text-white rounded-md overflow-hidden" id="red-collapse">
    <button onclick="toggleRedCollapse(this)" class="w-full p-4 font-semibold text-left hover:bg-red-600 focus:outline-none flex justify-between items-center">
      <span>What is your refund policy?</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">
      <div class="p-4 text-sm">
        We offer a 30-day money-back guarantee. If you're not satisfied with your purchase, you can request a full refund within 30 days.
      </div>
    </div>
  </div>
</section>

<script>
function toggleBlueCollapse(button) {
  const content = button.nextElementSibling;
  const icon = button.querySelector('svg');
  const container = document.getElementById('blue-collapse');
  
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
    icon.style.transform = 'rotate(0deg)';
    container.classList.remove('bg-purple-700');
    container.classList.add('bg-blue-500');
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
    icon.style.transform = 'rotate(180deg)';
    container.classList.remove('bg-blue-500');
    container.classList.add('bg-purple-700');
  }
}

function toggleGreenCollapse(button) {
  const content = button.nextElementSibling;
  const icon = button.querySelector('svg');
  const container = document.getElementById('green-collapse');
  
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
    icon.style.transform = 'rotate(0deg)';
    container.classList.remove('bg-green-700');
    container.classList.add('bg-green-500');
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
    icon.style.transform = 'rotate(180deg)';
    container.classList.remove('bg-green-500');
    container.classList.add('bg-green-700');
  }
}

function toggleRedCollapse(button) {
  const content = button.nextElementSibling;
  const icon = button.querySelector('svg');
  const container = document.getElementById('red-collapse');
  
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
    icon.style.transform = 'rotate(0deg)';
    container.classList.remove('bg-red-700');
    container.classList.add('bg-red-500');
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
    icon.style.transform = 'rotate(180deg)';
    container.classList.remove('bg-red-500');
    container.classList.add('bg-red-700');
  }
}
</script>
                        

                            <section class="p-6 max-w-md mx-auto">
  <div class="border border-gray-300 bg-white rounded-md overflow-hidden">
    <button onclick="toggleCollapseArrow(this)" class="w-full p-4 font-semibold flex justify-between items-center 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">
      <div class="p-4 text-sm">
        Click the "Sign Up" button in the top right corner and follow the registration process.
      </div>
    </div>
  </div>
</section>

<script>
function toggleCollapseArrow(button) {
  const content = button.nextElementSibling;
  const arrow = button.querySelector('svg');
  
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
    arrow.style.transform = 'rotate(0deg)';
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
    arrow.style.transform = 'rotate(180deg)';
  }
}
</script>
                        

                            <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>