I'm currently using bootstrap and scss to develop a WordPress page, but I am encountering challenges in creating collapsible content. The goal is to have four buttons where only the content of one button is displayed at a time while the others remain collapsed. When a user clicks on a button, only that specific content should be visible while the rest are hidden.
Additionally, there is an active class intended to indicate which button has been clicked, but it is not functioning as expected. Any assistance or guidance on this matter would be greatly appreciated. Thank you!
var mainStarter = {
initialize: function() {
this.buttonActive();
this.toggleButton();
},
buttonActive: function() {
$(".btn.btn-bg-md").on("click", function() {
$(this).toggleClass('active');
});
},
toggleButton: function() {
$('.column button').click(function() {
$(".collapse:visible").add($(this).next()).slideToggle();
});
},
$(function() {
mainStarter.initialize();
});
.row {
display: flex;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<!-- Item 1 -->
<div class="column">
<button type="button" class="btn btn-bg-md" data-toggle="collapse" data-target="#btn1" aria-pressed="false" autocomplete="off">
<h6>Day 1</h6>
</button>
</div>
<!-- Item 2 -->
<div class="column">
<button type="button" class="btn btn-bg-md" data-toggle="collapse" data-target="#btn2" aria-pressed="false" autocomplete="off">
<h6>Day 2</h6>
</button>
</div>
<!-- Item 3 -->
<div class="column'>
<button type="button" class="btn btn-bg-md" data-toggle="collapse" data-target="#btn3" aria-pressed="false" autocomplete="off">
<h6>Day 3</h6>
</button>
</div>
<!-- Item 4 -->
<div class="column">
<button type="button" class="btn btn-bg-md" data-toggle="collapse" data-target="#btn4" aria-pressed="false" autocomplete="off">
<h6>Day 4</h6>
</button>
</div>
<div class="container">
<div class="collapse" id="btn1">
<h1>Something 1</h1>
</div>
</div>
<div class="container">
<div class="collapse" id="btn2">
<h1>Something 2</h1>
</div>
</div>
<div class="container">
<div class="collapse" id="btn3">
<h1>Something 3</h1>
</div>
</div>
<div class='container">
<div class="collapse" id="btn4">
<n1>Something 4</n1>
</div>
</div>
</div>