Решением, которое потребует наименьшего количества изменений того, что у вас уже есть, вероятно, будет добавление дополнительной проверки, когда элемент развернут или свернут, которая изменит состояние вашей кнопки, когда все элементы закрыты или когда все элементы открыты, и кнопка развертывания / свертывания имеет неправильное состояние.
Вы можете добавить условие после обработчика события для развертывания / свертывания отдельного элемента следующим образом:
//If everything is visible
if($(".ca-box:visible").length == $(".ca-box").length && $(".btn-primary").text() == "expand"){
$(".btn-primary").click()
}
//Else if everything is invisible
else if($(".ca-box:hidden").length == $(".ca-box").length && $(".btn-primary").text() == "collapse"){
$(".btn-primary").click()
}
После элемента развернут / свернут, если одна из этих проверок верна, кнопка будет нажата автоматически, чтобы вернуть ее состояние к тому, каким оно должно быть.
Изменить добавление фрагмента:
Я не уверен как вы бы сделали это с библиотеками, которые вы используете, но вот как я бы сделал это, используя только jquery:
$('.ca-control').click(function(){
$(this).next().toggle()
//If everything is visible
if($(".ca-box:visible").length == $(".ca-box").length){
$('#toggleAll').text("collapse");
}
//Else if everything is invisible
else if($(".ca-box:hidden").length == $(".ca-box").length){
$('#toggleAll').text("expand");
}
});
$('#toggleAll').click(function(){
if($(this).text()=='collapse'){
$('.ca-box').hide();
$(this).text('expand');
}else{
$('.ca-box').show();
$(this).text('collapse');
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.statically.io/gist/moofawsaw/696afac8210ff49f0224e2e6fecb4f0f/raw/cd8c6aec13b9453d9bf2952c242bdfd61980f134/pairpal-collapsable.js"></script>
<button id="toggleAll" class="btn btn-primary expand-all">collapse</button>
<div class="collapsable collapsable-basic">
<h4 class="ca-control">
Box 1
</h4>
<div class="ca-box">
<p>
Aliquam
</p>
</div>
</div>
<div class="collapsable collapsable-basic">
<h4 class="ca-control">
Box 2
</h4>
<div class="ca-box">
<p>
Fusce nibh magna.
</p>
</div>
</div>
<div class="collapsable collapsable-basic">
<h4 class="ca-control">
Box 3
</h4>
<div class="ca-box">
<p>
Quisque lobortis\.
</p>
</div>
</div>