Tailwind CSS Accordion Components

                            <section class="max-w-lg mx-auto p-6">
  <div class="flex flex-col gap-2">
    <!-- Accordion item 1 with plus/minus -->
    <div class="bg-white border border-gray-200 rounded-lg 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="togglePlusAccordion(this)">
        <span>How do I create an account?</span>
        <div class="relative w-5 h-5">
          <!-- Plus/Minus icon -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
            <!-- Horizontal line (always visible) -->
            <rect x="6" y="11" width="12" height="2" fill="currentColor" />
            <!-- Vertical line (hidden when expanded) -->
            <rect x="11" y="6" width="2" height="12" fill="currentColor" class="vertical-line transition-opacity duration-300" />
          </svg>
        </div>
      </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>

    <!-- Accordion item 2 with plus/minus -->
    <div class="bg-white border border-gray-200 rounded-lg 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="togglePlusAccordion(this)">
        <span>I forgot my password. What should I do?</span>
        <div class="relative w-5 h-5">
          <!-- Plus/Minus icon -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
            <!-- Horizontal line (always visible) -->
            <rect x="6" y="11" width="12" height="2" fill="currentColor" />
            <!-- Vertical line (hidden when expanded) -->
            <rect x="11" y="6" width="2" height="12" fill="currentColor" class="vertical-line transition-opacity duration-300" />
          </svg>
        </div>
      </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>

    <!-- Accordion item 3 with plus/minus -->
    <div class="bg-white border border-gray-200 rounded-lg 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="togglePlusAccordion(this)">
        <span>How do I update my profile information?</span>
        <div class="relative w-5 h-5">
          <!-- Plus/Minus icon -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
            <!-- Horizontal line (always visible) -->
            <rect x="6" y="11" width="12" height="2" fill="currentColor" />
            <!-- Vertical line (hidden when expanded) -->
            <rect x="11" y="6" width="2" height="12" fill="currentColor" class="vertical-line transition-opacity duration-300" />
          </svg>
        </div>
      </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 togglePlusAccordion(button) {
  const content = button.nextElementSibling;
  const verticalLine = button.querySelector('.vertical-line');
  
  // Toggle max-height
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
    verticalLine.style.opacity = '1'; // Show vertical line (plus sign)
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
    verticalLine.style.opacity = '0'; // Hide vertical line (minus sign)
  }
}
</script>
                        

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

                            <section class="max-w-4xl mx-auto p-6">
  <h2 class="text-2xl font-bold text-center mb-8">Accordion Component Variants</h2>
  
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- Basic Accordion -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h3 class="text-lg font-semibold mb-4 text-gray-800">Basic Accordion</h3>
      <div class="flex flex-col gap-2">
        <div class="bg-white border border-gray-200 rounded-lg 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="toggleBasic(this)">
            How do I create an account?
            <svg class="w-5 h-5 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </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>
        <div class="bg-white border border-gray-200 rounded-lg 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="toggleBasic(this)">
            I forgot my password. What should I do?
            <svg class="w-5 h-5 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </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>
      </div>
    </div>

    <!-- Arrow Accordion -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h3 class="text-lg font-semibold mb-4 text-gray-800">Arrow Accordion</h3>
      <div class="flex flex-col gap-2">
        <div class="bg-white border border-gray-200 rounded-lg 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="toggleArrow(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>
        <div class="bg-white border border-gray-200 rounded-lg 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="toggleArrow(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>
      </div>
    </div>

    <!-- Plus/Minus Accordion -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h3 class="text-lg font-semibold mb-4 text-gray-800">Plus/Minus Accordion</h3>
      <div class="flex flex-col gap-2">
        <div class="bg-white border border-gray-200 rounded-lg 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="togglePlus(this)">
            <span>How do I create an account?</span>
            <div class="relative w-5 h-5">
              <!-- Plus/Minus icon -->
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
                <!-- Horizontal line (always visible) -->
                <rect x="6" y="11" width="12" height="2" fill="currentColor" />
                <!-- Vertical line (hidden when expanded) -->
                <rect x="11" y="6" width="2" height="12" fill="currentColor" class="plus-vertical transition-opacity duration-300" />
              </svg>
            </div>
          </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>
        <div class="bg-white border border-gray-200 rounded-lg 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="togglePlus(this)">
            <span>I forgot my password. What should I do?</span>
            <div class="relative w-5 h-5">
              <!-- Plus/Minus icon -->
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
                <!-- Horizontal line (always visible) -->
                <rect x="6" y="11" width="12" height="2" fill="currentColor" />
                <!-- Vertical line (hidden when expanded) -->
                <rect x="11" y="6" width="2" height="12" fill="currentColor" class="plus-vertical transition-opacity duration-300" />
              </svg>
            </div>
          </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>
      </div>
    </div>

    <!-- Joined Accordion -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h3 class="text-lg font-semibold mb-4 text-gray-800">Joined Accordion</h3>
      <div class="flex flex-col divide-y divide-gray-200 border border-gray-200 rounded-lg overflow-hidden">
        <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="toggleJoined(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>
        <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="toggleJoined(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>
      </div>
    </div>
  </div>
</section>

<script>
// Generic toggle function for all accordion variants
function toggleBasic(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)';
  }
}

function toggleArrow(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)';
  }
}

function togglePlus(button) {
  const content = button.nextElementSibling;
  const verticalLine = button.querySelector('.plus-vertical');
  
  // Toggle max-height
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
    verticalLine.style.opacity = '1'; // Show vertical line (plus sign)
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
    verticalLine.style.opacity = '0'; // Hide vertical line (minus sign)
  }
}

function toggleJoined(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>
                        

                            <section class="max-w-lg mx-auto p-6">
  <div class="flex flex-col gap-2">
    <!-- Accordion item 1 -->
    <div class="bg-white border border-gray-200 rounded-lg 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)">
        How do I create an account?
        <svg class="w-5 h-5 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </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>

    <!-- Accordion item 2 -->
    <div class="bg-white border border-gray-200 rounded-lg 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)">
        I forgot my password. What should I do?
        <svg class="w-5 h-5 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </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>

    <!-- Accordion item 3 -->
    <div class="bg-white border border-gray-200 rounded-lg 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)">
        How do I update my profile information?
        <svg class="w-5 h-5 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </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>
                        

                            <section class="max-w-lg mx-auto p-6">
  <div class="flex flex-col gap-2">
    <!-- Accordion item 1 with arrow -->
    <div class="bg-white border border-gray-200 rounded-lg 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>

    <!-- Accordion item 2 with arrow -->
    <div class="bg-white border border-gray-200 rounded-lg 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>

    <!-- Accordion item 3 with arrow -->
    <div class="bg-white border border-gray-200 rounded-lg 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>