Bootstrap collapse/expand multiple targets with different collapse states
Question
In the bootstrap docs, there is an example of how to toggle single and multiple targets, see https://getbootstrap.com/docs/4.0/components/collapse/?#multiple-targets .
When clicking "Toggle the first element" and then "Toggle both elements", the state of the two elements are mismatched eg one collapsed the other not.
How can I achieve that both/multiple elements are collapsed/shown when clicking "Toggle both elements" no matter what state the element had before.
1 answers
solution1
1 2021-02-16 12:40:13
In the bootstrap docs, there is an example of how to toggle single and multiple targets, see https://getbootstrap.com/docs/4.0/components/collapse/?#multiple-targets .
When clicking "Toggle the first element" and then "Toggle both elements", the state of the two elements are mismatched eg one collapsed the other not.
How can I achieve that both/multiple elements are collapsed/shown when clicking "Toggle both elements" no matter what state the element had before.
solution2
0 ACCPTED 2021-02-16 15:40:20
So after Dealish Teppes hint, I came up with this solution. Note to remove the data-target and add id on the "toggle both" button.
var toggle_all = $('#toggle_all') toggle_all.on('click', function(event) { if (toggle_all.attr("aria-expanded") === 'false') { $('.multi-collapse').collapse('show') toggle_all.attr('aria-expanded', 'true'); } else { $('.multi-collapse').collapse('hide') toggle_all.attr('aria-expanded', 'false'); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <,doctype html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Bootstrap Card Example</title> </head> <body> <p> <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button> <button id="toggle_all" class="btn btn-primary" type="button" data-toggle="collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> </p> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="card card-body"> Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger, </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample2"> <div class="card card-body"> Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger, </div> </div> </div> </div> <:-- Optional JavaScript --> <.-- jQuery first. then Popper.js. then Bootstrap JS --> <script src="https.//code.jquery.com/jquery-3:2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper:js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.