toggle menu

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Info · Modern Accordion</title>
    <!-- Font Awesome 6 (free) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <style>
        .container1 {
            max-width: 820px;
            width: 100%;
            margin: 0 auto;
        }

        /* card style accordion */
        .accordion {
            display: flex;
            flex-direction: column;
            gap: 12px;
            border-radius: 24px;
            background: transparent;
        }

        .accordion-item {
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 4px 14px #00000008, 0 2px 6px #0014280a;
            transition: box-shadow 0.25s ease, transform 0.2s ease;
            border: 1px solid #d3dce659;
            backdrop-filter: blur(2px);
            overflow: hidden;
        }

        .accordion-item:hover {
            box-shadow: 0 12px 28px #0000000d, 0 4px 12px #0014280f;
        }

        .accordion-header {
            padding: 12px 15px;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0px;
            color: #E1131D;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            user-select: none;
            transition: background 0.2s ease, color 0.2s;
            background: transparent;
            border-radius: 20px 20px 0 0;
            gap: 12px;
            border: none;
            width: 100%;
            text-align: left;
            font-family: inherit;
            line-height: 1.4;
        }

        .accordion-header .header-label {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }

        .accordion-header .header-label i {
            font-size: 16px;
            color: #E1131D;
            width: 16px;
            text-align: center;
            transition: color 0.2s;
            flex-shrink: 0;
        }

        .accordion-header.active .header-label i {
            color: #E1131D;
        }

        .accordion-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 40px;
            background: #5a59561f;
            color: #E1131D;
            font-size: 10px;
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            flex-shrink: 0;
        }

        .accordion-header.active .accordion-icon {
            background: #E1131D;
            color: white;
            transform: rotate(180deg);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.45s cubic-bezier(0.33, 1, 0.68, 1), padding 0.3s ease;
            background: #ffffff;
            padding: 0 24px;
            border-radius: 0 0 20px 20px;
        }

        .accordion-content.active {
            max-height: 700px;
            padding: 6px 24px 24px 24px;
            overflow-y: auto;
        }

        .content-inner {
            line-height: 1.6;
            color: #000000;
            font-size: 13px;
            animation: fadeSlide 0.3s ease;
        }

        .content-inner p {
            margin-bottom: 10px;
            /* letter-spacing: 0.096px; */
        }

        .content-inner ul {
            padding-left: 1.5rem;
            margin: 0.75rem 0 1rem;
            list-style-type: none;
        }

        .content-inner li {
            margin-bottom: 0.6rem;
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
        }

        /* .content-inner li::before {
            content: "•";
            color: #1f4a7a;
            font-weight: 700;
            font-size: 1.2rem;
            line-height: 1;
        } */

        .content-inner b {
            color: #E1131D;
            font-weight: 600;
        }

        .content-inner a {
            color: #E1131D;
            font-weight: 500;
            text-decoration: none;
            background-image: linear-gradient(to top, #e1131dab 0px 0px), linear-gradient(to top, #d0dae6 0px 0px);
            background-repeat: no-repeat;
            background-position: right bottom, left bottom;
            background-size: 0% 1px, 100% 1px;
            transition: background-size 0.3s ease, color 0.2s;
            padding-bottom: 1px;
        }

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

        .shipping-highlight {
            background: #5a59561f;
            padding: 7.5px 10px;
            border-radius: 16px;
            border-left: 4px solid #5A5956;
            margin: 2.5px 0 5px;
        }

        .seller-card {
            background: #5a59561f;
            border-radius: 16px;
            padding: 10px 12.5px;
            border: 1px solid #E1131D;
        }

        /* custom helper */
        .inline-badge {
            background: #ecf3fb;
            padding: 0.4rem 10px;
            border-radius: 30px;
            display: inline-block;
            font-size: 0.85rem;
        }

        /* animations */
        @keyframes fadeSlide {
            0% {
                opacity: 0;
                transform: translateY(-6px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* -------- responsive ------- */
        @media (max-width: 640px) {
            .accordion-header {
                padding: 14px 18px;
                font-size: 0.95rem;
            }

            .accordion-header .header-label i {
                font-size: 1rem;
                width: 1.4rem;
            }

            .accordion-icon {
                width: 26px;
                height: 26px;
                font-size: 0.9rem;
            }

            .accordion-content.active {
                padding: 4px 18px 20px 18px;
            }

            .content-inner {
                font-size: 0.92rem;
            }

            .content-inner ul {
                padding-left: 0.25rem;
            }
        }

        @media (max-width: 430px) {
            .accordion-header {
                padding: 12px 14px;
                font-size: 14px;
                gap: 8px;
            }

            .accordion-header .header-label {
                gap: 8px;
            }

            .accordion-header .header-label i {
                font-size: 14px;
                width: 14px;
            }

            .accordion-icon {
                width: 22px;
                height: 22px;
                font-size: 7.5px;
            }

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

            .content-inner {
                font-size: 12px;
                line-height: 1.5;
            }

            .shipping-highlight {
                padding: 0.5rem 7.5px;
            }

            .seller-card {
                padding: 0.75rem 1rem;
            }

            .accordion-item {
                border-radius: 16px;
            }
        }

        /* focus / accessibility */
        .accordion-header:focus-visible {
            outline: 2px solid #1f4a7a;
            outline-offset: 2px;
            border-radius: 40px;
        }

        /* scrollbar */
        .accordion-content.active::-webkit-scrollbar {
            width: 5px;
        }

        .accordion-content.active::-webkit-scrollbar-track {
            background: #f0f4fc;
            border-radius: 12px;
        }

        .accordion-content.active::-webkit-scrollbar-thumb {
            background: #b8c9dd;
            border-radius: 12px;
        }

        .accordion-content.active::-webkit-scrollbar-thumb:hover {
            background: #92a9c4;
        }

        /* extra small adjustments */
        .content-inner p:last-child {
            margin-bottom: 0;
        }
    </style>
</head>

<body>
    <div class="container1">
        <div class="accordion">

            <!-- PRODUCT DETAILS (open by default) -->
            <div class="accordion-item">
                <div class="accordion-header active" onclick="toggleAccordion(this)" role="button" tabindex="0"
                    aria-expanded="true">
                    <span class="header-label">
                        <i class="fas fa-tag"></i>
                        Product Details
                    </span>
                    <span class="accordion-icon"><i class="fas fa-chevron-down"></i></span>
                </div>
                <div class="accordion-content active">
                    <div class="content-inner">
                        {{ product.description }}
                    </div>
                </div>
            </div>

            <!-- SHIPPING INFORMATION -->
            <div class="accordion-item">
                <div class="accordion-header" onclick="toggleAccordion(this)" role="button" tabindex="0"
                    aria-expanded="false">
                    <span class="header-label">
                        <i class="fas fa-truck-fast"></i>
                        Shipping & Delivery
                    </span>
                    <span class="accordion-icon"><i class="fas fa-chevron-down"></i></span>
                </div>
                <div class="accordion-content">
                    <div class="content-inner">
                        <div class="shipping-highlight">
                            <p style="margin-bottom: 0.25rem;"><i class="fas fa-clock"
                                    style="color: #E1131D; width: 14px;"></i> <b>Dispatch:</b> 1–2 business days</p>
                            <p style="margin-bottom: 0.25rem;"><i class="fas fa-box"
                                    style="color: #E1131D; width: 14px;"></i> <b>Standard:</b> Free · 4–10 business
                                days</p>
                            <p style="margin-bottom: 0.25rem;"><i class="fas fa-bolt"
                                    style="color: #E1131D; width: 14px;"></i> <b>Express:</b> ₹80 · 2–6 business days
                            </p>
                            <p style="margin-bottom: 0;"><i class="fas fa-map-pin"
                                    style="color: #E1131D; width: 14px;"></i> <b>COD:</b> Available · no extra charge
                            </p>
                        </div>
                        <p style="margin-top: 0.75rem;">
                            <i class="fas fa-link" style="color: #E1131D; margin-right: 6px;"></i>
                            Track your order: <a href="https://patialachic.com/apps/track123"
                                target="_blank">patialachic.com/apps/track123</a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- SELLER INFORMATION -->
            <div class="accordion-item">
                <div class="accordion-header" onclick="toggleAccordion(this)" role="button" tabindex="0"
                    aria-expanded="false">
                    <span class="header-label">
                        <i class="fas fa-store"></i>
                        Seller Information
                    </span>
                    <span class="accordion-icon"><i class="fas fa-chevron-down"></i></span>
                </div>
                <div class="accordion-content">
                    <div class="content-inner">
                        <div class="seller-card">
                            <p style="display: flex; gap: 8px; align-items: baseline; margin-bottom: 0.75rem;">
                                <i class="fas fa-building" style="color: #E1131D; width: 14px;"></i>
                                <span><b>Patialachic</b> · Plot No. 17, 1st Floor, Vibhag-2, Aanant Business Park, Near
                                    Nayara Petrol Pump, Kiran Chowk to Kargil Chowk Road, Kiran Chowk, Surat -
                                    395011.</span>
                            </p>
                            <p style="display: flex; gap: 8px; align-items: center; margin: 0;">
                                <i class="fas fa-flag" style="color: #E1131D; width: 14px;"></i>
                                <span><b>Country Of Origin:</b> India</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- NEED HELP? -->
            <div class="accordion-item">
                <div class="accordion-header" onclick="toggleAccordion(this)" role="button" tabindex="0"
                    aria-expanded="false">
                    <span class="header-label">
                        <i class="fas fa-headset"></i>
                        Need Help?
                    </span>
                    <span class="accordion-icon"><i class="fas fa-chevron-down"></i></span>
                </div>
                <div class="accordion-content">
                    <div class="content-inner">
                        <ul style="padding-left: 0;">
                            <li
                                style="display: flex; align-items: center; gap: 12px; padding: 0.4rem 0; border-bottom: 1px solid #eef4fa;">
                                <i class="fas fa-envelope" style="color: #E1131D; width: 16px;"></i>
                                <span><b>Email Us :</b> Patialachic@gmail.com</span>
                            </li>
                            <li style="display: flex; align-items: center; gap: 12px; padding: 0.6rem 0 0.2rem;">
                                <i class="fas fa-clock" style="color: #E1131D; width: 16px;"></i>
                                <span><b>Timing :</b> 10 AM – 6 PM, Monday to Friday</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

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

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

                // If the clicked header was not active, open it
                if (!isActive) {
                    header.classList.add('active');
                    header.setAttribute('aria-expanded', 'true');
                    if (content) content.classList.add('active');
                }
            };

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

            // ensure first (Product Details) is open by default
            // but if user wants to keep it open, we already have "active" classes in html.
            // additionally we set aria-expanded for the first one manually (already true)
            // no extra action needed.
        })();
    </script>
</body>

</html>