We Keep Coding

Hide/show cards in bootstrap

Im trying to hide and show a few cards in bootstrap, but I can't figure it out.
All cards have the class card (of course) and im trying to hide all those cards when a button is clicked. Here is what I have now:
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 call for the function is correct cause the alert does work properly.
For some reason the
jQuery(document).ready(function($) {
$(".card").hide();
});
part does work when outside the js function (when it's not connected to the button).
No idea if it helps but here is also a snipped of my bootstrap doc:
<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>Newegg</p>
<p>Newegg</p>
<p>Newegg</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>Newegg</p>
<p>Newegg</p>
<p>Newegg</p>
</div>
</div>
Here the things I've tried already:
The toggle How to hide and show bootstrap 4 cards by hovering over navigation menu through css?
Standard js document.getElementById(".card").style.display = "none";
I've looked at the react stuff, but I don't understand that.

I think what you have to do is this if you want to make a show and hide toggle of all the elements that have the card class in your DOM.
var myFunction = function() {
var divsToHide = document.getElementsByClassName("card");
if(divsToHide.length>0){
for(var i = 0; i < divsToHide.length; i++){
if( divsToHide[i].style.display== "none"){
divsToHide[i].style.display = "block";
}else{
divsToHide[i].style.display = "none"; // depending on what you're doing
}
}} }
I hope it helps you

Show/hide div with javascript

I have a menu which should show the sub-elements organised in a div when clicked.
I provide below the structure of the html
function showOrHide() {
if (window.innerWidth < 800) {
var div = document.getElementById("links");
if (div.style.display == "block") {
div.style.display = "none";
} else {
div.style.display = "block";
}
}
}
<li>
<div id="image" onclick="showOrHide()">
<span>Test1</span>
</div>
<div id="links">
<span>Test2</span>
</div>
</li>
<li>
<div id="image" onclick=" showOrHide()">
<span>Test3</span>
</div>
<div id="links">
<span>Test4</span>
</div>
</li>
I would like the div id="links" to be shown or hidden when I click on div id="image". I have the following javascript.
The problem that I face is that onclick javascript is showing all the divs id=links in the menu and I would like only the div links next to the div image to be shown. Example when I click on Test1 only Test2 should be shown.

Element IDs should be unique within the entire document.
You must try creating unique id per div.
function showOrHide(rowNum)
{ if (window.innerWidth < 800) {
var div = document.getElementById("links_"+ rowNum);
if (div.style.display == "block")
{
div.style.display = "none";
}
else
{
div.style.display = "block";
}
}
}
<li>
<div id="image_1" onclick="showOrHide(1)">
<span>Test1
</span></div>
<div id="links_1">
<span >Test2</span>
</div></li>
<li>
<div id="image_2" onclick=" showOrHide(2)">
<span>Test3
</span></div>
<div id="links_2">
<span >Test4</span>
</div></li>

Change id and structure accordingly.
<li>
<div id="image_1" onclick="showOrHide(1)">
<span>Test1
</span>
</div>
<div id="links_1">
<span >Test2</span>
</div>
</li>
<li>
<div id="image_2" onclick=" showOrHide(2)">
<span>Test3
</span>
</div>
<div id="links_2">
<span >Test4</span>
</div>
</li>
JavaScript:
function showOrHide(rowNumber)
{ if (window.innerWidth < 800) {
var div = document.getElementById("links_"+ rowNumber);
if (div.style.display == "block")
{
div.style.display = "none";
}
else
{
div.style.display = "block";
}
}
}

Just provide a parameter to your showOrHide function which will be the selector for your div and do the toggling to that selector. See the implementation below
<li>
<div id="image" onclick="showOrHide('#links_1')">
<span>Test1</span>
</div>
<div id="links_1">
<span >Test2</span>
</div>
</li>
<li>
<div id="image" onclick=" showOrHide('#links_2')">
<span>Test3</span>
</div>
<div id="links_2">
<span >Test4</span>
</div>
</li>
And the JS:
function showOrHide(divSelector)
{
var div = document.querySelector(divSelector);
if (div.style.display == "none")
{
div.style.display = "block";
}
else
{
div.style.display = "none";
}
}

var elems = document.getElementsByClassName("links");
Array.from(elems).forEach(v => v.addEventListener('click', function() {
this.parentElement.getElementsByClassName('links')[0].classList.toggle('hidden');
}));
.hidden {
display: none;
}
<li>
<div class="links">
<span>Test1 </span>
</div>
<div class="links">
<span>Test2</span>
</div>
</li>
<li>
<div class="links">
<span>Test3
</span></div>
<div class="links">
<span>Test4</span>
</div>
</li>

Your main issue here is that an element's id must be unique to that element. Other elements cannot have the same id. Instead, you can pass through the element into your showOrHide() method using this, and then get the next element using nextElementSibling. This will work provided your HTML structure is consistent:
function showOrHide(elem) {
if (window.innerWidth < 800) {
const div = elem.nextElementSibling;
if (!div.style.display || div.style.display == "block") {
div.style.display = "none";
} else {
div.style.display = "block";
}
}
}
<li>
<div id="image" onclick="showOrHide(this)">
<span>Test1</span>
</div>
<div class="links">
<span>Test2</span>
</div>
</li>
<li>
<div id="image" onclick=" showOrHide(this)">
<span>Test3</span>
</div>
<div class="links">
<span>Test4</span>
</div>
</li>

You can not use the same id lots of time on same HTML. Id attribute is unique, but you can use class.
You can use this code maybe it will help you.
<li>
<div class="image" onclick="showOrHide(this)">
<span>Test1
</span></div>
<div class="links">
<span >Test2</span>
</div></li>
<li>
<div class="image" onclick=" showOrHide(this)">
<span>Test3
</span></div>
<div class="links">
<span >Test4</span>
</div></li>
function showOrHide(element) {
if (window.innerWidth < 800) {
var div = element.closet(".links");
if (div.style.display == "block") {
div.style.display = "none";
} else {
div.style.display = "block";
}
}
}

Javascript onclick show/hide for multiple rows (Dynamic content)

I'm having a list of users where the admin can approve/decline.For these two action i'm using show/hide oncllick the code works.But in multiple rows for any action button onclick it shows/hide the content.I want paticular row's action button 'ld show/hide the content,on click of that button.How can I solve this?
Here is My view code laravel blade,
<script>
function showhide() {
var div = document.getElementById("collapse1");
if (div.style.display !== "none")
div.style.display = "none";
else
div.style.display = "block";
}
</script>
Content:
<div>
<button href="#collapse1" class="btn btn-success nav-toggle" onclick="showhide()">Action</button>
</div>
#if($user->approved == 0)
<div id="collapse1" style="display:none">
<span>
<a href="{!! route('approve', ['id' => $user->id]) !!}"><img alt="" src="http://www.clker.com/cliparts/l/n/a/E/b/t/check-mark-button-hi.png"
style="height: 48px; width: 48px" /></a>
</span><br/>
#else
<span>
<a href="{!! route('decline', ['id' => $user->id]) !!}">
<img alt="" src="https://images.onlinelabels.com/images/clip-art/TzeenieWheenie/TzeenieWheenie_red_green_OK_not_OK_Icons_1.png"
style="height: 48px; width: 48px"/>
</a>
</span>
</div>
#endif
Script
#pushonce('custom-scripts')
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
#endpushonce

It conflict id
You need change id:
id="collapse1" => id="collapse{$user->id}"
js and html function like https://jsfiddle.net/ft9xprnb/3/ .You can see result by click link and content function edited: elem.getAttribute("href")
function showhide(elem)
{
console.log(elem.getAttribute("href"));
var div = document.getElementById(elem.getAttribute("href").replace("#", ""));
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}

You can pass this in html
<button href="#collapse1" class="btn btn-success nav-toggle" onclick="showhide(this)">Action</button>
And then in JS
function showhide(elem)
{
var div = document.getElementById(elem.href.replace("#", ""));
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
This way the elem you will be passing to click will be the clicked element.

Try changing content to this
<div>
<button href="#collapse1" class="btn btn-success nav-toggle" onclick="showhide()">Action</button>
</div>
<div id="collapse1" style="display:none">
#if($user->approved == 0)
<span>
<a href="{!! route('approve', ['id' => $user->id]) !!}">
<img alt="" src="http://www.clker.com/cliparts/l/n/a/E/b/t/check-mark-button-hi.png" style="height: 48px; width: 48px"/>
</a>
</span>
<br/>
#else
<span>
<a href="{!! route('decline', ['id' => $user->id]) !!}">
<img alt="" src="https://images.onlinelabels.com/images/clip-art/TzeenieWheenie/TzeenieWheenie_red_green_OK_not_OK_Icons_1.png" style="height: 48px; width: 48px"/>
</a>
</span>
#endif
</div>

Check if a element is visible

I want to check if an element is visible and play a song only when it is, using: a trigger('click') event handler.
Unfortunately, I can't get it working as expected.
What am I doing wrong and how can I fix it?
Here is my JavaScript code (jQuery):
$('.overlay').on('click', function () {
if ($('a.icon-play').is(':hidden') == false) {
$('#stop').trigger('click');
} else {
$('#play').trigger('click');
}
});
Below is my HTML code:
<div class="info">
<div class="player-home-video">
<audio id="yourownlullaby-audio" src="uploads/downloads/Buenas%20%20Noches%20%3C?php%20echo%20$_POST['name'];%20?%3E.mp3"></audio>
</div>
<div class="thumbnail-home-video">
<a href="#" id="play">
<span class="icon-play preview-icon" id="play"></span>
</a>
<a href="#" id="stop">
<span class="icon-pause preview-icon" id="stop"></span>
</a>
<img class="info" src="img/thumbnail-home-video.png" />
<div class="overlay"></div>
</div>
</div>

$('.overlay').on('click', function () {
if ($('a .icon-play').is(':hidden') == true) {
$('#stop').trigger('click');
}
else
{
$('#play').trigger('click');
} });
Your​ if should be the other way.

How can I hide one div before opening another?

How can I make it so that only one div can be shown at a time? I've tried adding "document.getElementById(currentID).style.display='none';" in the after the else but that doesn't work.
<h5 onclick="showImage('chair')">Chair</h5>
<h5 onclick="showImage('table')">Table</h5>
<h5 onclick="showImage('long_table')">Meeting Table</h5>
<div id="chair">
<img src="images/1.jpg" height="300px"/>
<h4>Product 1</h4>
</div>
<div id="table">
<img src="images/2.jpg" height="300px"/>
<h4>Product 2</h4>
</div>
<div id="longtable">
<img src="images/3.jpg" height="300px"/>
<h4>Product 3</h4>
</div>
<script type="text/javascript">
var currentID = "";
function showImage(id){
if(currentID == id){
document.getElementById(id).style.display='none';
currentID = "";
}else{
document.getElementById(id).style.display='block';
currentID = id;
}
}
</script>

Better to add a class to your HTML and then grab the divs by their class. You can then loop through the elements to hide them all and then un-hide the one you've clicked.
Example:
var arrProducts = document.getElementsByClassName('product');
for (i = 0; i < arrProducts.length; i++) {
arrProducts[i].style.display = 'none';
}
function showImage(id) {
for (i = 0; i < arrProducts.length; i++) {
if (id == arrProducts[i].id) {
if (document.getElementById(id).style.display === 'none') {
arrProducts[i].style.display = 'block';
} else {
arrProducts[i].style.display = 'none';
}
} else {
arrProducts[i].style.display = 'none';
}
}
}
h5 {
cursor: pointer;
}
.product img {
height: 10px;
width: 10px;
}
<h5 onclick="showImage('chair');">Chair</h5>
<h5 onclick="showImage('table');">Table</h5>
<h5 onclick="showImage('long_table');">Meeting Table</h5>
<div class="product" id="chair">
<img src="images/1.jpg" height="300px" />
<h4>Product 1 (Chair)</h4>
</div>
<div class="product" id="table">
<img src="images/2.jpg" height="300px" />
<h4>Product 2 (Table)</h4>
</div>
<div class="product" id="long_table">
<img src="images/3.jpg" height="300px" />
<h4>Product 3 (Meeting Table)</h4>
</div>

While this won't help you fix things in you current code, you can actually do this without any JavaScript by abusing radiobuttons. This is quite common.
http://jsfiddle.net/mo7yppp8/
Each div needs a radio button above it, and to be enclosed within a label. This way, clicking on the div will trigger the radiobutton, deselecting any other div in the process.
<label>
<input class="divSelector" type="radio" name="divSelector" value="" />
<div>Sample text</div>
</label>
Then, all you need is some CSS to hide the radiobuttons, and some to shrink the divs which aren't right after a checked input.
.divSelector {
display: none;
}
.divSelector:checked + div {
font-size: 12pt;
}
div {
font-size: 0pt;
background-color: blue;
color: white;
overflow: clip;
padding: 2em;
height: 12px;
}
div:hover {
background-color: grey;
}

Try substituting longtable for long_table at "Meeting Table" h5
var showImage = function showImage(id) {
var active = document.getElementById(id);
active.style.display = 'block';
var notActive = document.querySelectorAll("div:not(#" + active.id + ")");
Array.prototype.slice.call(notActive)
.forEach(function(el) {
el.style.display = "none";
})
};
div[id] {
display: none;
}
<h5 onclick="showImage('chair')">Chair</h5>
<h5 onclick="showImage('table')">Table</h5>
<h5 onclick="showImage('longtable')">Meeting Table</h5>
<div id="chair">
<img src="images/1.jpg" height="300px" alt="chair" />
<h4>Product 1</h4>
</div>
<div id="table">
<img src="images/2.jpg" height="300px" alt="table" />
<h4>Product 2</h4>
</div>
<div id="longtable">
<img src="images/3.jpg" height="300px" alt="meeting table" />
<h4>Product 3</h4>
</div>

You need to rethink the logic of your function, I'm guessing this is what you meant:
var currentID = "";
function showImage(id){
if(currentID != id){
if (currentID != "") // added this test in response to JFK's comment
document.getElementById(currentID).style.display='none';
document.getElementById(id).style.display='block';
currentID = id;
}
else { // added after OP clarified the question
document.getElementById(id).style.display='none';
currentID = "";
}
}

If you have the chance to use jQuery, there is a really awesome solution possible. It would work like this:
http://jsfiddle.net/dnf6gsuL/2/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h5>Chair</h5>
<div>
<img src="images/1.jpg" height="300px"/>
<h4>Product 1</h4>
</div>
<h5>Table</h5>
<div>
<img src="images/2.jpg" height="300px"/>
<h4>Product 2</h4>
</div>
<h5 id="longtable">Meeting Table</h5>
<div>
<img src="images/3.jpg" height="300px"/>
<h4>Product 3</h4>
</div>
<script>
$("h5").click(function(eve){
$("div").each(function(){
$(this).fadeOut("fast", function(){
$(eve.target).next("div").fadeIn("fast");
});
});
});
</script>