tabs

<style>
    .tabs-section {
        font-family: sans-serif;
        max-width: 100%;
        /* padding: 20px; */
        padding: 20px 0px 0px 0px;
    }

    .tab-buttons {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        /* padding: 10px; */
        padding: 10px 0px 0px 0px;
        border-radius: 6px;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tab-buttons::-webkit-scrollbar {
        display: none;
    }

    .tab-buttons button {
        padding: 20px 12px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        font-weight: 500;
        border-radius: 5px 5px 0 0;
        height: auto;
        align-content: center;
        display: grid;
        transition: background 0.3s;
        white-space: normal;
        flex-shrink: 0;
    }

    .tab-buttons button.active {
        background-color: #FFFFFF;
        color: #24aeb1;
    }

    .tab-content {
        display: none;
        animation: fadeIn 0.3s ease-in-out;
        padding: 0px 11px 15px 11px;
    }

    .tab-content.active {
        display: block;
    }

    /* FAQ Toggle */
    .faq-item {
        border-top: 1px solid #ddd;
        padding: 10px 0;
    }

    .faq-question {
        cursor: pointer;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .faq-answer {
        display: none;
        padding-top: 5px;
        font-size: 14px;
        color: #333;
    }

    .faq-question::after {
        content: '+';
        font-size: 16px;
    }

    .faq-question.active::after {
        content: '-';
    }

    .tab-content p {
        font-family: sans-serif;
        font-size: 14px;
        color: #6f7284;
    }

    @media (max-width: 768px) {
        .tab-content p {
            font-family: sans-serif;
            font-size: 13px;
            color: #6f7284;
            line-height: 16px
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>

<div class="tabs-section">
    <div class="tab-buttons">
        <button class="tab-link active" onclick="openTab(event, 'description')">Description</button>
        <button class="tab-link" onclick="openTab(event, 'benefits')">Key Benefits</button>
        <button class="tab-link" onclick="openTab(event, 'usage')">How to use</button>
        <button class="tab-link" onclick="openTab(event, 'safety')">Safety Information/Precaution</button>
        <button class="tab-link" onclick="openTab(event, 'other')">Other Information</button>
    </div>

    <div id="description" class="tab-content active">
        <p>
            {{ product.description }}
        </p>
    </div>

    <div id="benefits" class="tab-content">
        <p> - Provides targeted relief from muscle aches, strains, and
            sprains.<br>- Quick and effective pain relief due to its unique formulation.<br>- Non-greasy
            and easy to apply, making it convenient for on-the-go use.<br>- Suitable for adults and
            children over 12 years old. </p>
    </div>

    <div id="usage" class="tab-content">
        <p>Shake the Bontress Pro Plus Spray can well before use. Hold the can at a distance of 5-10cm from the affected
            area and spray
            evenly. Gently massage the spray into the skin until fully absorbed. Wash hands after application. Use as
            directed
            or as recommended by a healthcare professional.
        </p>
    </div>

    <div id="safety" class="tab-content">
        <p> - Avoid contact with eyes, mucous membranes, or broken skin.<br>- Do
            not inhale the spray. Use in a well-ventilated area.<br>- Discontinue use if irritation or
            rash occurs.<br>- Keep out of reach of children.<br>- Consult a doctor if pregnant, nursing,
            or under medication. </p>
    </div>

    <div id="other" class="tab-content">
        <p>Bontress Pro Plus 100gm is a convenient and reliable pain relief solution for individuals dealing with muscle
            discomfort. Keep a can handy at home, in your gym bag, or at work for quick relief whenever needed.</p>
    </div>
</div>

<script>
    function openTab(evt, tabName) {
        const tabs = document.querySelectorAll(".tab-content");
        tabs.forEach(tab => tab.classList.remove("active"));

        const links = document.querySelectorAll(".tab-link");
        links.forEach(link => link.classList.remove("active"));

        document.getElementById(tabName).classList.add("active");
        evt.currentTarget.classList.add("active");
    }

    document.querySelectorAll('.faq-question').forEach(item => {
        item.addEventListener('click', () => {
            item.classList.toggle('active');
            const answer = item.nextElementSibling;
            answer.style.display = (answer.style.display === 'block') ? 'none' : 'block';
        });
    });
</script>