Toggle

<style>
  .pp-product-info {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    font-family: inherit;
  }

  .pp-product-info * {
    box-sizing: border-box;
  }

  .pp-accordion {
    display: grid;
    gap: 12px;
  }

  .pp-accordion-item {
    border: 1px solid #e8dfd7;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    transition: 0.3s ease;
  }

  .pp-accordion-item:has(.pp-accordion-header.active) {
    border-color: #9b674b;
    box-shadow: 0 8px 25px #4d2b1c14;
  }

  .pp-accordion-header {
    width: 100%;
    padding: 17px 18px;
    border: none;
    background: #fff;
    color: #2d1a11;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    letter-spacing: 0.2px;
  }

  .pp-accordion-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .pp-accordion-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f7eee8;
    color: #8b5337;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .pp-accordion-header.active .pp-accordion-badge {
    background: #6D3700;
    color: #fff;
  }

  .pp-accordion-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f7eee8;
    position: relative;
    flex-shrink: 0;
    transition: 0.3s ease;
  }

  .pp-accordion-icon::before,
  .pp-accordion-icon::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 1.5px;
    background: #6D3700;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s ease;
  }

  .pp-accordion-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .pp-accordion-header.active .pp-accordion-icon {
    background: #6D3700;
  }

  .pp-accordion-header.active .pp-accordion-icon::before {
    background: #fff;
  }

  .pp-accordion-header.active .pp-accordion-icon::after {
    background: #fff;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  .pp-accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.35s ease;
  }

  .pp-accordion-content.active {
    max-height: 800px;
    opacity: 1;
  }

  .pp-accordion-inner {
    padding: 2px 20px 20px 62px;
    color: #5e514a;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.2px;
  }

  .pp-accordion-inner p {
    margin: 0 0 10px;
  }

  .pp-accordion-inner p:last-child {
    margin-bottom: 0;
  }

  .pp-accordion-inner ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pp-accordion-inner li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 8px;
  }

  .pp-accordion-inner li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: #9b674b;
    font-size: 12px;
    top: 2px;
  }

  .pp-accordion-inner b,
  .pp-accordion-inner strong {
    color: #2d1a11;
    font-weight: 600;
  }

  .pp-accordion-inner a {
    color: #8b5337;
    text-decoration: none;
    border-bottom: 1px solid #cda58e;
    transition: 0.3s ease;
  }

  .pp-accordion-inner a:hover {
    color: #2d1a11;
    border-color: #2d1a11;
  }

  .pp-accordion-header:focus-visible {
    outline: 2px solid #9b674b;
    outline-offset: 2px;
  }

  @media screen and (max-width: 767px) {
    .pp-accordion {
      gap: 10px;
    }

    .pp-accordion-header {
      padding: 14px;
      font-size: 14px;
    }

    .pp-accordion-badge {
      width: 29px;
      height: 29px;
      font-size: 10px;
    }

    .pp-accordion-icon {
      width: 28px;
      height: 28px;
    }

    .pp-accordion-inner {
      padding: 0 14px 17px 55px;
      font-size: 13px;
      line-height: 1.7;
    }
  }

  @media screen and (max-width: 480px) {
    .pp-accordion-header {
      gap: 10px;
    }

    .pp-accordion-left {
      gap: 9px;
    }

    .pp-accordion-inner {
      padding-left: 14px;
    }
  }
</style>

<div class="pp-product-info">
  <div class="pp-accordion">

    <div class="pp-accordion-item">
      <button class="pp-accordion-header active" type="button">
        <span class="pp-accordion-left">
          <span class="pp-accordion-badge">01</span>
          <span>Product Details</span>
        </span>
        <span class="pp-accordion-icon"></span>
      </button>

      <div class="pp-accordion-content active">
        <div class="pp-accordion-inner">
          {{ product.description }}
        </div>
      </div>
    </div>

    <div class="pp-accordion-item">
      <button class="pp-accordion-header" type="button">
        <span class="pp-accordion-left">
          <span class="pp-accordion-badge">02</span>
          <span>Shipping & Delivery Policy</span>
        </span>
        <span class="pp-accordion-icon"></span>
      </button>

      <div class="pp-accordion-content">
        <div class="pp-accordion-inner">
          <p><strong>Dispatch:</strong> Orders are processed and dispatched within 1–2 business days of confirmation.
          </p>
          <p><strong>Standard Shipping:</strong> Free · Delivered in 4–10 business days depending on location.</p>
          <p><strong>Express Shipping:</strong> ₹80 · Delivered in 2–6 business days depending on location.</p>
          <p><strong>Tracking:</strong> A tracking link is sent to your registered email once dispatched. Track anytime
            at <a href="/apps/track123">thekurtaclub.com/apps/track123</a></p>
          <p><strong>COD:</strong> Available on all orders · No extra charge.</p>
        </div>
      </div>
    </div>

    <div class="pp-accordion-item">
      <button class="pp-accordion-header" type="button">
        <span class="pp-accordion-left">
          <span class="pp-accordion-badge">03</span>
          <span>Seller Information</span>
        </span>
        <span class="pp-accordion-icon"></span>
      </button>

      <div class="pp-accordion-content">
        <div class="pp-accordion-inner">
          <p><strong>The Kurta Club:</strong> Plot No. 17, 1st Floor, Vibhag-2, Aanant Business Park, Near Nayara Petrol
            Pump, Kiran Chowk to Kargil Chowk Road, Kiran Chowk, Surat - 395011.</p>
          <p><strong>Country Of Origin:</strong> India</p>
        </div>
      </div>
    </div>

    <div class="pp-accordion-item">
      <button class="pp-accordion-header" type="button">
        <span class="pp-accordion-left">
          <span class="pp-accordion-badge">04</span>
          <span>Need Help?</span>
        </span>
        <span class="pp-accordion-icon"></span>
      </button>

      <div class="pp-accordion-content">
        <div class="pp-accordion-inner">
          <ul>
            <li>Call Us: <strong>+91 99999 99999</strong></li>
            <li>WhatsApp Us: <strong>+91 99999 99999</strong></li>
            <li>Email Us: <strong>info@domainname.com</strong></li>
            <li>Timing: <strong>10:00 AM - 6:00 PM (Monday-Friday)</strong></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>

<script>
  document.querySelectorAll('.pp-accordion-header').forEach(function (header) {
    header.addEventListener('click', function () {
      const content = this.nextElementSibling;
      const isActive = this.classList.contains('active');

      document.querySelectorAll('.pp-accordion-header').forEach(function (item) {
        item.classList.remove('active');
      });

      document.querySelectorAll('.pp-accordion-content').forEach(function (item) {
        item.classList.remove('active');
      });

      if (!isActive) {
        this.classList.add('active');
        content.classList.add('active');
      }
    });
  });
</script>