Toggle Menu

<style>
    .gap-[4px] {
        gap: 4px;
    }

    .flex-col {
        flex-direction: column;
    }

    .flex {
        display: flex;
    }

    .mt-[18px] {
        margin-top: 18px;
    }

    .text-content-3 {
        --tw-text-opacity: 1;
        color: rgb(64 69 67 / var(--tw-text-opacity));
    }

    .leading-[24px] {
        line-height: 24px;
    }

    .font-normal {
        font-weight: 400;
    }

    .text-[12px] {
        font-size: 12px;
    }

    .text-content-6 {
        --tw-text-opacity: 1;
        color: rgb(111 113 112 / var(--tw-text-opacity));
    }

    .leading-[20px] {
        line-height: 20px;
    }

    .bls__page-faq-title {
        text-transform: capitalize;
        color: #6f7170;
    }

    .bls__page-faq-content.overflow-hidden.py-30.pt-5 {
        background: transparent !important;
        border: none !important;
    }

    .bls__page-faq-content.overflow-hidden.py-30.pt-5 {
        padding: 0% !important;
    }
</style>

<section class="bls__section color-default-color-scheme gradient  bls__faq  faq-page"
    style="margin-bottom:15px; padding-left:0px; padding-right:0px;">
    <div class="container-fluid section-full">
        <div class="faq-content pb-0 mb-5">
            <div class="row">
                <div class=" col-md-12  " style="margin-bottom:0px; padding-left:0px; padding-right:0px;">
                    <div class="bls__page-faq-items bls-toggle relative border-bottom">
                        <h5 class="bls__page-faq-title fs-15 py-20 mb-0 relative">
                            Additional Information
                            <span class="open-children-toggle d-block-important"></span>
                        </h5>
                        <div class="bls__page-faq-content overflow-hidden py-30 pt-5"
                            style="display: none; padding-bottom: 0rem;">
                            <p>
                            <ul>
                                <li style="list-style-type: none;">
                                    <div class="flex flex-col gap-[4px] mt-[18px]">
                                        <h2 style="margin-bottom: clamp(0rem, 0vw, 0rem);"
                                            class="text-[12px] leading-[24px] text-content-3 font-normal">MANUFACTURED
                                            AND MARKETED BY</h2>
                                        <p class="text-[12px] leading-[20px] text-content-6">NaturoHabit Private Limited
                                            GP-26, Sector 18, Gurugram, Haryana - 122015</p>
                                    </div>
                                    <div class="flex flex-col gap-[4px] mt-[18px]">
                                        <h2 style="margin-bottom: clamp(0rem, 0vw, 0rem);"
                                            class="text-[12px] leading-[24px] text-content-3 font-normal">COUNTRY OF
                                            ORIGIN</h2>
                                        <p class="text-[12px] leading-[20px] text-content-6">India</p>
                                    </div>
                                    <div class="flex flex-col gap-[4px] mt-[18px]">
                                        <h2 style="margin-bottom: clamp(0rem, 0vw, 0rem);"
                                            class="text-[12px] leading-[24px] text-content-3 font-normal">NODAL OFFICER
                                            DETAIL</h2>
                                        <p class="text-[12px] leading-[20px] text-content-6">Madhuri Pandey
                                            madhuri@nathabit.in</p>
                                    </div>
                                </li>
                            </ul>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    function toggle() {
        var faq_parent = '.bls__page-faq-items > .bls__page-faq-title';
        document.querySelectorAll(faq_parent).forEach((item) => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                const target = e.currentTarget;
                const parent = target.parentElement;
                const faqContent = parent.querySelector('.bls__page-faq-content');
                slideAnime({
                    target: faqContent,
                    animeType: 'slideToggle',
                });
                if (item.closest('.bls-toggle').classList.contains('active')) {
                    item.closest('.bls-toggle').classList.remove('active');
                } else {
                    item.closest('.bls-toggle').classList.add('active');
                }
            });
        });
    }
    toggle();
</script>