I am working with two different types of charts: an Emotion chart and a Polarity chart. To control the visibility of these charts, I have implemented two buttons, one for each chart. The functionality is such that when the first button is clicked, only the Emotion chart should be displayed, while clicking the second button should hide the Emotion chart and show the Polarity chart.
Additionally, there is a separate button designed to hide whichever chart is currently active. My question is whether it is possible to achieve this hiding functionality using only Bootstrap without any JavaScript?
I have utilized event listeners to handle the click actions on each button. For a concise example showcasing this setup, please refer to the following link:
let isEmotionsButtonActivated = false;
let isPolarityButtonActivated = true;
const emotionsButton = document.getElementById("emotions");
const polarityButton = document.getElementById("polarity");
const emotionsChart = document.getElementById("multiCollapseExample1");
const polarityChart = document.getElementById("multiCollapseExample2");
polarityButton.classList.add("active");
polarityChart.classList.add("show");
emotionsButton.addEventListener("click", () => {
if (!isEmotionsButtonActivated) {
isEmotionsButtonActivated = true;
isPolarityButtonActivated = false;
polarityChart.classList.remove("show");
emotionsChart.classList.add("show");
emotionsButton.classList.add("active");
polarityButton.classList.remove("active");
}
});
polarityButton.addEventListener("click", () => {
if (!isPolarityButtonActivated) {
isEmotionsButtonActivated = false;
isPolarityButtonActivated = true;
emotionsChart.classList.remove("show");
polarityChart.classList.add("show");
emotionsButton.classList.remove("active");
polarityButton.classList.add("active");
}
});<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e1508150a">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62000d0d16111610031222574c514c53">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="btn-group btn-group-sm">
<button class="btn btn-primary" id="emotions" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Emotions</button>
<button class="btn btn-primary" id="polarity" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Polarity</button>
</div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Hide</button>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Emotions Chart Placeholder
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Polarity Chart Placeholder
</div>
</div>
</div>
</div>
</body>
</html>The current implementation of the Hide button hides the active chart while displaying the hidden chart simultaneously. Is there a way to modify this behavior within Bootstrap settings alone, without relying on JavaScript?
Removing the data-bs-target attribute from each button results in the immediate disappearance of the active chart upon button click, without any animation effect. Does this align with Bootstrap's expected behavior or is there a workaround? As someone new to Bootstrap, I initially assumed that eliminating the data-bs-target would prevent the button from having a targeted element to display.