Collapse Colors

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