У меня есть два вложенных аккордеона, и все работает так, как мне бы хотелось.Тем не менее, мой последний шаг - сделать так, чтобы основной аккордеон закрывался ВСЕ при нажатии, мне трудно выбрать внутренние аккордеоны для закрытия при повторном нажатии кнопки 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');
}