переключить значок начальной загрузки 4 свернуть все / развернуть все

Question

Аккордеон Bootstrap 4 с кнопкой «скрыть все» и «показать все» ... У меня возникают проблемы с очисткой кнопки скрыть все / показать все, если пользователь нажимает аккордеон. Прямо сейчас значки меняются от плюса до минуса, а кнопка «Скрыть все показать все» открывает все панели аккордеона. Проблема заключается в том, что когда пользователь щелкает панель, а затем нажимает «скрыть все» или «показать все», она не возвращается в правильное состояние.

HTML:

 <div class="show-hide-toggle-container">
                    <button class="open-faq-accordions">SHOW ALL</button>
                </div>
                <!--tab content-->
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="bpd" role="tabpanel"
                         aria-labelledby="nav-bpd-tab">


                        <div id="resources-faq-accordion--bpd">

                            <div class="tab-one-resources-faq">
                                <div class="card-header" id="headingOne" data-toggle="collapse"
                                     data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">test

                                    <i class="fa fa-plus"></i>
                                </div>

                                <div id="collapseOne" class="collapse" aria-labelledby="headingOne">
                                    <div class="card-body">
                                        test
                                    </div>
                                </div>
                            </div>


                            <div class="tab-one-resources-faq">
                                <div class="card-header" id="headingTwo" data-toggle="collapse"
                                     data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    TEST
                                    <i class="fa fa-plus"></i>
                                </div>

                                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
                                    <div class="card-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                                        richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
                                    </div>
                                </div>
                            </div>

jquery:
    var $panelHeading = $('.card-header'),
    $panelsOpen = $('.open-faq-accordions');


/* doc.ready */
$(document).ready(function () {

    $($panelsOpen).on('click', function () {
        var $this = $(this);
        $this.toggleClass('open-faq-accordions');

        var showAll = $this.hasClass('open-faq-accordions');

        if (showAll) {
            $this.text('SHOW ALL');
        } else {
            $this.text('HIDE ALL');
        }
        panelsIsOpenBpd.call(this);
        toggleIcon.call(this);
    });


    $('.collapse')
        .on('shown.bs.collapse', function () {
            $(this)
                .parent()
                .find(".fa-plus")
                .removeClass("fa-plus")
                .addClass("fa-minus");
        })
        .on('hidden.bs.collapse', function () {
            $(this)
                .parent()
                .find(".fa-minus")
                .removeClass("fa-minus")
                .addClass("fa-plus");
        });

    function toggleIcon(){
        if($('.collapse').hasClass('show')){
            $('.card-header').find('i').removeClass('fa-plus').addClass('fa-minus');
        }else{
            $('.card-header').find('i').removeClass('fa-minus').addClass('fa-plus');
        }
    }

});

/* end doc.ready */