Is it possible to toggle button and collapse together?
Button 1 toggles the text
Button 2 toggles the button (active/inactive)
Button 3 shall toggle both together
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="collapse" href="#test" role="button" aria-expanded="false" aria-controls="test">collapse</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="button" href="#test2" role="button" aria-expanded="false" aria-controls="test2">button</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="button collapse" href="#test3" role="button" aria-expanded="false" aria-controls="test3">both - not working</a>
</li>
</ul>
<div class="collapse multi-collapse" id="test">
collapse
</div>
<div class="collapse multi-collapse" id="test3">
both
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
At the same time tou can’t with the default events from bootstrap.
But you can do it yourself with JS.
So, if you want this:
#button1 toggle the collapse #test.
#button2 toggle himself.
#button2 toggle #button2 and the collapse test3.
You can do something like this with the bootstrap js methods.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#test" role="button" aria-expanded="false" aria-controls="test" id="button1">collapse</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#test2" role="button" aria-expanded="false" aria-controls="test2" id="button2">button</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#test3" role="button" aria-expanded="false" aria-controls="test3" id="button3">toggle button and collapse test 3</a>
</li>
</ul>
<div class="collapse multi-collapse" id="test">
collapse
</div>
<div class="collapse multi-collapse" id="test3">
both
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let button3 = document.querySelector('#button3');
const bsCollapse = new bootstrap.Collapse('#test')
const bsCollapse3 = new bootstrap.Collapse('#test3')
const bsButton = new bootstrap.Button('#button2')
button1.addEventListener('click', function () {
bsCollapse.toggle();
});
button2.addEventListener('click', function () {
bsButton.toggle();
});
button3.addEventListener('click', function () {
bsCollapse3.toggle();
bsButton.toggle();
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>3
This is good example from Bootstrap website
https://getbootstrap.com/docs/5.0/components/collapse/#multiple-targets
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>in this example you can control cards with data-bs-target
so when data-bs-toggle triger cards with class in data-bs-target will change
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
if see this code notice when this button clicked 2 cards will be change
what if one of them will be open and other one its close well first one will be close and secound card will be open
in your case will be like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="collapse" href="#test" role="button" aria-expanded="false"
aria-controls="test">collapse</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="collapse" href="#test2" role="button" aria-expanded="false"
aria-controls="test2">button</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="collapse" data-bs-target=".collapse" href="#test3" role="button"
aria-expanded="false" >both - not working</a>
</li>
</ul>
<div class="collapse multi-collapse" id="test">
collapse
</div>
<div class="collapse multi-collapse" id="test2">
both
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>so i add data-bs-target=”.collapse” to anchor with text both – not working
and you set data-bs-toggle=”button” in anchore with href=”#test2″ while there is no tag with class button so i change this to collapse
also base on w3school says
Note: For <a> elements, you can use the href attribute instead of the
data-bs-target attribute
so instead of data-bs-target you can just use href like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="collapse" href="#test" role="button" aria-expanded="false"
aria-controls="test">collapse</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="collapse" href="#test2" role="button" aria-expanded="false"
aria-controls="test2">button</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="collapse" href=".test3" role="button"
aria-expanded="false" >both - not working</a>
</li>
</ul>
<div class="collapse multi-collapse test3" id="test">
collapse
</div>
<div class="collapse multi-collapse test3" id="test2">
both
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>i did change the href for anchor with text (both – not working) to href=".test3" and added test3 to both div classes
<div class="collapse multi-collapse test3" id="test">
collapse
</div>
<div class="collapse multi-collapse test3" id="test2">
both
</div>