My concept involves implementing a switch that alternates between displaying a bootstrap carousel and cards. Essentially, one of them will be visible when the button is pressed while the other remains invisible. Initially, I am attempting to hide my existing carousel using JavaScript code, but for some reason it is not functioning properly. As someone who is new to JavaScript, I hope I'm not making any foolish mistakes. Any assistance would be greatly appreciated. Thank you.
function toggleDisplay(toggles) {
var element = document.getElementById("format1");
if (toggles.value == "yes") {
format1.style.display = "block";
toggles.value = "no";
} else {
toggles.value = "yes";
}
};<div class=" container container1">
<br>
<div class="card card-body" id="card-mine">
<span>[...]</span>
</div>
<div id="format1">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4000">
<ol class="carousel-indicators" style="margin-bottom: 3%;">
[...]
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-color: green">
[...]
</div>
<!-- Slide Five - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-color: #8D6E63">
[...]
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
</a>
</div>
<br>
</div>
</div>
<button id="toggles" class="button toggles" value="yes" onclick="toggleDisplay(this)">Click</button>
</div>