I'm trying to change this js script to work as follow: I need to hide another section and the same button at the same time is shown the already working section.
Someone can point me in the right direction? I would love to know what to put into the JS as I'm a total coding noob and can't figure myself how to solve it.
function showStores() {
var x = document.getElementById("allstores");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}<button onclick="showStores()">See All Stores</button>
<div id="allstores">All stores</div>Toggle the hidden
Also use the recommended addEventListener instead of inline click
document.getElementById("toggle").addEventListener("click",function() {
const x = document.getElementById("allStores");
const y = document.getElementById("someStores");
x.hidden = !x.hidden
y.hidden = !y.hidden
this.innerText = x.hidden ? 'See all stores' : 'See some stores'
})<button type="button" id="toggle">See All Stores</button>
<div id="allStores" hidden>All stores</div>
<div id="someStores">Some stores</div>If you do not like .hidden you can use a class
document.getElementById("toggle").addEventListener("click",function() {
const x = document.getElementById("allStores");
const y = document.getElementById("someStores");
x.classList.toggle("hide")
y.classList.toggle("hide")
this.innerText = x.classList.contains("hide") ? 'See all stores' : 'See some stores'
}).hide { display: none; }<button type="button" id="toggle">See All Stores</button>
<div id="allStores" class="hide">All stores</div>
<div id="someStores">Some stores</div>