Toggle

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Information Tabs</title>
  <style>
    .container1 {
      max-width: 800px;
      margin: 0 auto;
    }

    .accordion {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      /* box-shadow: 0 2px 10px #0000001a; */
    }

    .accordion-item {
      border-bottom: 1px solid #eaeaea;
      background-color: white;
    }

    .accordion-item:last-child {
      border-bottom: none;
    }

    .accordion-header {
      padding: 7px 20px;
      font-size: 16px;
      font-weight: 600;
      color: #333;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background-color 0.3s ease;
      user-select: none;
    }

    /* .accordion-header:hover {
      background-color: #f8f9fa;
    } */

    .accordion-header.active {
      /* background-color: #f8f9fa; */
      border-bottom: 1px solid #eaeaea;
    }

    .accordion-icon {
      font-size: 20px;
      transition: transform 0.3s ease;
      color: #666;
    }

    .accordion-header.active .accordion-icon {
      transform: rotate(45deg);
      color: #333;
    }

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

    .accordion-content.active {
      padding: 3px 20px 3px 20px;
      max-height: 500px;
      overflow-y: auto;
    }

    .content-inner {
      line-height: 1.6;
      color: #000000;
    }

    /* Content styling for each section */
    .content-inner h3 {
      margin-bottom: 10px;
      color: #333;
    }

    .content-inner p {
      margin-bottom: 15px;
      letter-spacing: 0.6px;
    }

    .content-inner ul {
      padding-left: 20px;
      margin-bottom: 15px;
    }

    .content-inner li {
      margin-bottom: 8px;
    }

    .content-inner a {
      color: #212326;
      font-size: inherit;
      position: relative;
      cursor: pointer;
      padding-bottom: 2px;
      text-decoration: none;
      background-color: transparent;
      background-image: linear-gradient(to top, #212326 0px 0px), linear-gradient(to top, #d2d5d9 0px 0px);
      background-repeat: no-repeat;
      background-position: right bottom, right bottom;
      background-size: 0% 1px, 100% 1px, 100% 1px, 100% 1px;
      transition-property: background-size;
      transition-timing-function: ease;
      transition-duration: .25s;
    }

    .content-inner a:hover {
      background-position: left bottom, left bottom;
      background-size: 100% 1px, 100% 1px, 100% 1px, 100% 1px;
    }

    /* Responsive styles */
    @media (max-width: 768px) {
      .accordion-header {
        padding: 16px;
        font-size: 15px;
      }

      .accordion-content {
        padding: 0 16px;
      }

      .accordion-content.active {
        padding: 16px;
      }

      body {
        padding: 15px;
      }
    }

    @media (max-width: 480px) {
      .accordion-header {
        padding: 14px;
        font-size: 14px;
      }

      .accordion-content.active {
        padding: 14px;
      }

      .accordion-icon {
        font-size: 18px;
      }
    }

    /* Animation for content */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .accordion-content.active .content-inner {
      animation: fadeIn 0.3s ease;
    }

    /* Focus styles for accessibility */
    .accordion-header:focus {
      outline: 2px solid #007bff;
      outline-offset: 2px;
    }
  </style>
</head>

<body>
  <div class="container1">
    <div class="accordion">
      <!-- PRODUCT DETAILS -->
      <div class="accordion-item">
        <div class="accordion-header" onclick="toggleAccordion(this)">
          Product Details
          <span class="accordion-icon">+</span>
        </div>
        <div class="accordion-content">
          <div class="content-inner">
            <p>{{ product.description }}</p>
          </div>
        </div>
      </div>

      <!-- RETURN AND EXCHANGE -->
      <div class="accordion-item">
        <div class="accordion-header" onclick="toggleAccordion(this)">
          Return And Exchange
          <span class="accordion-icon">+</span>
        </div>
        <div class="accordion-content">
          <div class="content-inner">
            <p>Ethniaura offers a simple 3-day No-Questions-Asked Return & Refund Policy.
              Kindly find more details in our <a href="/pages/return-refund">Return
                and exchange policy.</a></p>
          </div>
        </div>
      </div>

      <!-- SHIPPING INFORMATION -->
      <div class="accordion-item">
        <div class="accordion-header" onclick="toggleAccordion(this)">
          Shipping Information
          <span class="accordion-icon">+</span>
        </div>
        <div class="accordion-content">
          <div class="content-inner">
            <p>Free Shipping. COD is Available. <br><br>

              Product will be dispatched post confirmation within 48-72hrs and will get delivered within 7-10 working
              Days* To know more details kindly refer our <a href="/pages/shipping-policy" style="color: blue;">Shipping
                policy.</a></p>
          </div>
        </div>
      </div>

      <!-- SELLER INFORMATION -->
      <div class="accordion-item">
        <div class="accordion-header" onclick="toggleAccordion(this)">
          Seller Information
          <span class="accordion-icon">+</span>
        </div>
        <div class="accordion-content">
          <div class="content-inner">
            <p><b>Ethniaura:</b> 202 Divya Mall Old Kosad Road Kosad Surat <br><br>

              <b>Country Of Origin:</b> India
            </p>
          </div>
        </div>
      </div>

      <!-- NEED HELP? -->
      <div class="accordion-item">
        <div class="accordion-header" onclick="toggleAccordion(this)">
          Need Help?
          <span class="accordion-icon">+</span>
        </div>
        <div class="accordion-content">
          <div class="content-inner">
            <ul>
              <li>Call Us : <b>+91 96489 95489</b></li>
              <li>Whatsapp Us : <b>+91 96489 95489</b></li>
              <li>Email Us : <b>Info.ethniaura@gmail.com</b></li>
              <li>Timing : <b>10:30 AM - 7:00 PM (Monday-Saturday)</b></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function toggleAccordion(header) {
      const item = header.parentElement;
      const content = header.nextElementSibling;
      const isActive = header.classList.contains('active');

      // Close all accordion items
      document.querySelectorAll('.accordion-header').forEach(h => {
        h.classList.remove('active');
      });
      document.querySelectorAll('.accordion-content').forEach(c => {
        c.classList.remove('active');
      });

      // If it wasn't active, open it
      if (!isActive) {
        header.classList.add('active');
        content.classList.add('active');
      }
    }

    // Optional: Open first accordion by default on page load
    document.addEventListener('DOMContentLoaded', function () {
      const firstHeader = document.querySelector('.accordion-header');
      if (firstHeader) {
        firstHeader.classList.add('active');
        firstHeader.nextElementSibling.classList.add('active');
      }
    });

    // Keyboard accessibility
    document.querySelectorAll('.accordion-header').forEach(header => {
      header.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          toggleAccordion(this);
        }
      });
    });
  </script>
</body>

</html>