I've been attempting to show and hide a selection of cards in bootstrap, but I'm having trouble figuring it out. All the cards share the class "card," and my goal is to hide them all when a specific button is clicked. Below is my current code:
function myFunction() {
jQuery(document).ready(function($) {
$(".card").hide();
});
var game = document.getElementById("game").value;
var resolution = document.getElementById("resolution").value;
var graphic = document.getElementById("graphic").value;
if (game == "Black" && graphic == "high" && resolution == "1080") {
alert("Hello " + game + "! You will now be redirected to www.w3Schools.com");
} else if (book == "Red") {
} else if (book == "Green") {
} else {
}
}
The function call appears to be correct as the alert is functioning properly.
Interestingly, the
jQuery(document).ready(function($) {
$(".card").hide();
});
segment of code works when placed outside of the JS function, but not when connected to the button click event.
It may or may not be relevant, but here is a snippet of my Bootstrap document as well:
<button type="submit" class="btn btn-primary" id="btn" onclick="myFunction()">Submit</button>
</form>
</div>
<!-- Results -->
<div class="card" id="p2" style="width:200px; margin:30px">
<img class="card-img-top" src="https://image" alt="Card image" style="width:100%">
<div class="card-body">
<h5 class="card-title">Processor</h5>
<p><a href="#">Newegg</a></p>
<p><a href="#">Newegg</a></p>
<p><a href="#">Newegg</a></p>
</div>
</div>
<div class="card" id="p3" style="width:200px; margin:30px">
<img class="card-img-top" src="https://image" alt="Card image" style="width:100%">
<div class="card-body">
<h5 class="card-title">Graphic card</h5>
<p><a href="#">Newegg</a></p>
<p><a href="#">Newegg</a></p>
<p><a href="#">Newegg</a></p>
</div>
</div>
Here are the methods I've tried so far:
Using the toggle method How to hide and show bootstrap 4 cards by hovering over navigation menu through CSS?
Directly modifying the display property with standard JS: document.getElementById(".card").style.display = "none";
I've also looked into React techniques, but I'm not quite grasping it.