I currently have 4 expandable menus and 5 buttons. The button labeled Collapse first controls the first menu, while the Collapse second button controls the second menu, and so on.
The current behavior: The Collapse all button for each menu will close it if it is expanded and expand it if it is closed.
Desired outcome: However, I would like the Collapse all button to expand all menus that are closed and leave them unchanged if they are already expanded. Then, if clicked again, it should close any open menus without affecting those that are already closed.
Here is a fiddle I created for the current behavior: expand menu fidlle
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1, #collapseExample2, #collapseExample3, #collapseExample4" aria-expanded="false" aria-controls="collapseExample">
Collapse all
</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">
Collapse first
</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
Collapse second
</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
Collapse third
</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample4" aria-expanded="false" aria-controls="collapseExample">
Collapse fourth
</button>
</p>
<div class="collapse" id="collapseExample1">
<div class="card card-body">
hi first
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-body">
hi second
</div>
</div>
<div class="collapse" id="collapseExample3">
<div class="card card-body">
hi third
</div>
</div>
<div class="collapse" id="collapseExample4">
<div class="card card-body">
hi fourth
</div>
</div>How can I achieve this?