Не работает должным образом после изменения размера окна

$(document).ready(function () {
            checkWidth();
        });
        $(window).on("resize", function () {
            checkWidth();
        });
        function checkWidth() {
                $vWidth = $(window).width();
                // $('#test').html($vWidth);

                //Check condition for screen width
                if ($vWidth < 767) {
                    alert();
                    $(".f-click").on("click", function (event) {
                        event.stopPropagation();
                            $(".f-click").siblings(".f-pages").slideUp();
                            if ($(this).siblings(".f-pages").css('display') == 'none') {
                                $(this).siblings(".f-pages").slideDown();
                            } else {
                                $(this).siblings(".f-pages").slideUp();
                                return false;
                            }
                        });
                } else {
                    // $(".f-click").siblings(".f-pages").slideDown();
                    // $(".f-click").siblings(".f-pages").css("pointer-events", "none");
                    alert("else");
                }
            }
   

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-2 col-md-2 mt-4 mt-md-0">
                    <p class="font-weight-bold f-click">WellAway</p>
                    <ul class="f-pages">
                        <li><a href="#">WellAway </a></li>
                        <li><a href="#">About </a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#"> Providers</a></li>
                        <li><a href="#"> Testimonials</a></li>
                        <li><a href="#">Contact </a></li>
                    </ul>

                </div>
                <div class="col-lg-2 col-md-2">
                    <p class="font-weight-bold f-click">Extended Plans</p>
                    <ul class="f-pages">
                        <li><a href="#">Kidnap/Ransom </a></li>
                        <li><a href="#">Personal Disability</a></li>
                        <li><a href="#">Personnel Protection</a></li>

                    </ul>
                </div>
                <div class="col-lg-2 col-md-2">
                    <p class="font-weight-bold f-click">Members & Brokers</p>
                    <ul class="f-pages">
                        <li><a href="#">Member Login </a></li>
                        <li><a href="#">Broker Login </a></li>
                        <li><a href="#">Provider Search</a></li>

                    </ul>
                </div>
                <div class="col-lg-2 col-md-2">
                    <p class="font-weight-bold f-click">Our Plans</p>
                    <ul class="f-pages">
                        <li><a href="#">Individuals & Families </a></li>
                        <li><a href="#">Global Work & study</a></li>
                        <li><a href="#">Group & Business</a></li>

                    </ul>
                </div>
                

Я хочу сделать аккордеон, когда размер экрана меньше 767. Я написал код, он прекрасно работает при обновлении экрана, но после изменения размера экрана окна. это не работает должным образом. пожалуйста, помогите мне. Благодарность

это HTML-код кода, по которому я хочу щелкнуть элемент p (f-click), чтобы открыть содержимое ul (f-pages). когда размер экрана меньше 767.

     <div class="col-lg-2 col-md-2 mt-4 mt-md-0">
                        <p class="font-weight-bold f-click">WellAway</p>
                        <ul class="f-pages">
                            <li><a href="#">WellAway </a></li>
                            <li><a href="#">About </a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#"> Providers</a></li>
                            <li><a href="#"> Testimonials</a></li>
                            <li><a href="#">Contact </a></li>
                        </ul>

                    </div>
                    <div class="col-lg-2 col-md-2">
                        <p class="font-weight-bold f-click">Extended Plans</p>
                        <ul class="f-pages">
                            <li><a href="#">Kidnap/Ransom </a></li>
                            <li><a href="#">Personal Disability</a></li>
                            <li><a href="#">Personnel Protection</a></li>

                        </ul>
                    </div>
                    <div class="col-lg-2 col-md-2">
                        <p class="font-weight-bold f-click">Members & Brokers</p>
                        <ul class="f-pages">
                            <li><a href="#">Member Login </a></li>
                            <li><a href="#">Broker Login </a></li>
                            <li><a href="#">Provider Search</a></li>

                        </ul>
                    </div>
                    <div class="col-lg-2 col-md-2">
                        <p class="font-weight-bold f-click">Our Plans</p>
                        <ul class="f-pages">
                            <li><a href="#">Individuals & Families </a></li>
                            <li><a href="#">Global Work & study</a></li>
                            <li><a href="#">Group & Business</a></li>

                        </ul>
                    </div>

это JQuery кода. ` ` `

    $(document).ready(function () {
                checkWidth();
            });
            $(window).on("resize", function () {
                checkWidth();
            });
            function checkWidth() {
                    $vWidth = $(window).width();


                    //Check condition for screen width
                    if ($vWidth < 767) {
                        alert();
                        $(".f-click").on("click", function () {

                                $(".f-click").siblings(".f-pages").slideUp();
                                if ($(this).siblings(".f-pages").css('display') == 'none') {
                                    $(this).siblings(".f-pages").slideDown();
                                } else {
                                    $(this).siblings(".f-pages").slideUp();

                                }
                            });
                    } else {
                        $(".f-click").siblings(".f-pages").slideDown();
                        $(".f-click").siblings(".f-pages").css("pointer-events", "none");

                    }
                }

```