Toggle

<style>
  .custom-accordion {
    border-radius: 6px;
    max-width: 700px;
    margin: 0 auto;
    font-family: 'Helvetica Neue', sans-serif;
  }

  .accordion-item {
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
    background-color: #f8f8f8;
  }

  .accordion-header {
    padding: 14px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    background-color: #f9f9f9;
    transition: background 0.3s;
  }

  .accordion-header:hover {
    background-color: #f1f1f1;
  }

  .accordion-icon {
    transition: transform 0.3s ease;
  }

  .accordion-item.active .accordion-icon {
    transform: rotate(180deg);
  }

  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0 20px;
    background-color: white;
  }

  .accordion-item.active .accordion-content {
    padding: 15px 20px;
    max-height: 500px;
  }
</style>

<div class="custom-accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      Product Description
      <span class="accordion-icon">▼</span>
    </div>
    <div class="accordion-content">
      <p>
      <ul>
        <li>{{ product.description }}</li>
      </ul>
      </p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      Care Guide
      <span class="accordion-icon">▼</span>
    </div>
    <div class="accordion-content">
      <p>Hand wash recommended. Do not bleach. Iron on low heat.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      Shipping Policy
      <span class="accordion-icon">▼</span>
    </div>
    <div class="accordion-content">
      <p>Orders are processed within 24 hours and shipped the next day. Delivery takes approximately 3-5 business days.
        Tracking details will be provided via email once the order is dispatched.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      Exchange Policy
      <span class="accordion-icon">▼</span>
    </div>
    <div class="accordion-content">
      <p>Only exchanges are available (no returns).
        Exchange is allowed only for size issues or damaged products.
        Customers must provide an unboxing video as proof for damage claims.
        Exchanges must be requested within 7 days of delivery.</p>
    </div>
  </div>
</div>

<script>
  document.querySelectorAll('.accordion-header').forEach(header => {
    header.addEventListener('click', () => {
      const item = header.parentElement;
      const isOpen = item.classList.contains('active');

      // Close all items
      document.querySelectorAll('.accordion-item').forEach(i => i.classList.remove('active'));

      // Toggle current item
      if (!isOpen) {
        item.classList.add('active');
      }
    });
  });
</script>