I'm trying to mix a Pill's Tab with some Collapse Multi targets, so that, when a certain pill is selected, the corresponding pane appears and a secondary pane closes.
In the case below, when Profile is selected the profile tab should appear and the Text div should disappear. When another tab is selected, the corresponding tab should, again, open and the div should also show itself.
I switched the data-bs-target on the profile pill to a class, as it is in the Collapse Multi targets Docs, but it isn't that simple. Also played with the id's but no results.
Can't seem to find a way to do this with only Bootstrap :/
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<!-- FavIcon -->
<link rel="shortcut icon" href="../images/favicon.ico" type="image/png">
<link rel="icon" href="../images/favicon.ico" type="image/png">
<title>MyGarden</title>
</head>
<body>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<div>
Text
</div>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target=".pills-profile" type="button" role="tab" aria-controls="pills-profile pills-profile2" aria-selected="false">Profile</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">This doesn't matter</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">This also doesn't matter</div>
<div class="tab-pane fade pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Profile</div>
</div>
</body>
</html>