Как закрыть вложенный аккордеон с помощью jQuery - PullRequest
1 голос
/ 27 сентября 2019

У меня есть два вложенных аккордеона, и все работает так, как мне бы хотелось.Тем не менее, мой последний шаг - сделать так, чтобы основной аккордеон закрывался ВСЕ при нажатии, мне трудно выбрать внутренние аккордеоны для закрытия при повторном нажатии кнопки MAIN ... вот пример аккордеона с ОДНЫМ внутренним аккордеоном

HTML:

   <!--accordion-->
            <button class="btn-reset-styles faq-accordion-btn" type="button" data-toggle="collapse"
                    data-target="#faqCollapse"
                    aria-expanded="false" aria-controls="faqCollapse">
                Hello, how may I assist you?
                <i class="fas fa-angle-right"></i>
                <i class="fas fa-angle-down d-none"></i>
            </button>
            <div class="collapse" id="faqCollapse">
                <div class="accordion-content accordion-content--body">


                    <!--inner accordion parent-->
                    <div id="faq-inner-accordion">
                        <!--accordion blocks-->
                        <div class="accordion-link-block" data-toggle="collapse" data-target="#collapseOne" role="button"
                             aria-expanded="false" aria-controls="collapseOne">
                            <!--accordion inner collapse block-->
                            <div class="accordion-link-block--inner">
                                <p>Do you offer a Prescription Assistance Program for LATUDA?</p>
                                <div class="btn-reset-styles btn-arrow-right">
                                    <i class="fas fa-angle-right"></i>
                                    <i class="fas fa-angle-down d-none"></i>
                                </div>
                            </div>
                            <div class="collapse" id="collapseOne" data-parent="#faq-inner-accordion">
                                <div class="inner-accordion-answer">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat!
                                </div>
                            </div>
                         </div>
                       </div>

Jquery:

  $(document).ready(function () {

    //accordion btn
    $($faqAccordionBtn).on('click', function () {
        $(this).toggleClass('no-bottom-radius');
        $(this).find('i').toggleClass('fa-angle-right').toggleClass('fa-angle-down');
    });

    //accordion arrow right button inner content
    $($innerAccordionLink).on('show.bs.collapse', function (e) {
        toggleIcon.call(this);
        $(this).find('.collapse').collapse('hide');
    });

    $($innerAccordionLink).on('hide.bs.collapse', function (e) {
        toggleIcon.call(this);
    });
});
/* end doc.ready */

 //toggle arrow right / down
function toggleIcon() {
    $(this).find('i').toggleClass('fa-angle-right').toggleClass('fa-angle-down');
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...