I want to show cards when cards is clicked and show table when table is clicked. But by default, one of them needs to show at the beginning with the other hidden. But if either button is clicked on again the div will stay to what is clicked on. I have it half way working. If you start on the table button first you will see it working until you click again (same button) or start on the cards button. Any help is appreciated. Here is an example of what I need.
JavaScript
x
26
26
1
const targetTable = document.getElementById("table");2
const targetCards = document.getElementById("cards");3
const btn = document.getElementById("toggle");4
const btn2 = document.getElementById("toggle2");5
6
7
targetCards.style.display = "block";8
targetTable.style.display = "none";9
10
btn.onclick = function () {11
if (targetTable.style.display !== "none") {12
targetTable.style.display = "none";13
} else {14
targetTable.style.display = "block";15
targetCards.style.display = "none";16
}17
};18
19
btn2.onclick = function () {20
if (targetCards.style.display !== "none") {21
targetCards.style.display = "none";22
} else {23
targetCards.style.display = "block";24
targetTable.style.display = "none";25
}26
};JavaScript
1
6
1
<body>2
<div id="cards">This div shows cards.</div>3
<div id="table">This div shows table.</div>4
<button id="toggle">table</button>5
<button id="toggle2">cards</button>6
</body>Advertisement
Answer
Here’s one way to approach it. Use classes to consolidate your functions, then use a data-attribute to designate which button reveals what item
JavaScript
1
9
1
document.querySelectorAll('.toggler').forEach(button => {2
button.addEventListener('click', e => {3
let targ = `#${e.target.dataset.ref}`;4
// set them all to hidden5
document.querySelectorAll('.toggles').forEach(div => div.classList.add('hide'));6
// reveal the one we want7
document.querySelector(targ).classList.remove('hide');8
});9
});JavaScript
1
3
1
.hide {2
display: none;3
}JavaScript
1
4
1
<div id="cards" class='toggles'>This div shows cards.</div>2
<div id="table" class='toggles hide'>This div shows table.</div>3
<button class='toggler' data-ref='table'>table</button>4
<button class='toggler' data-ref='cards'>cards</button>