Buttons for showing/hiding divs not working as intended

Question

I'm new on here aswell as new to HTML, CSS and JS.I want to create a button that makes one visible while at the same time making four other 's invisible. I've tried

function ShowGraphics() {

element = document.querySelector("#Graphics");
element.style.visibility = "visible";

element = document.querySelector("#Photos");
element.style.visibility = "hidden";

element = document.querySelector("#Renders");
element.style.visibility = "hidden";

element = document.querySelector("#Videos");
element.style.visibility = "hidden";

element = document.querySelector("#Mods");
element.style.visibility = "hidden";
}

before - including its' variations for each button-, but nothing happened. I've also tried giving each "element" a unique name, made no difference. Maybe one of you could help me out there. Thx in Advance:)

Answer 1

Try this code below

 function ShowGraphics() { element = document.querySelector("#Graphics"); element.style.display= "block"; element = document.querySelector("#Photos"); element.style.display = "none"; element = document.querySelector("#Renders"); element.style.display = "none"; element = document.querySelector("#Videos"); element.style.display = "none"; element = document.querySelector("#Mods"); element.style.display = "none"; }

 <div id="Graphics"> Hello </div> <div id="Photos"> Hello </div> <div id="Renders"> Hello </div> <div id="Videos"> Hello </div> <div id="Mods"> Hello </div> <button onclick="ShowGraphics()">Click</button>

And if you dont to change the position of button this is your solution:

 function ShowGraphics() { document.getElementById("Graphics").style.visibility = "visible"; document.getElementById("Photos").style.visibility = "hidden"; document.getElementById("Renders").style.visibility = "hidden"; document.getElementById("Videos").style.visibility = "hidden"; document.getElementById("Mods").style.visibility = "hidden"; }

 <div id="Graphics"> Hello </div> <div id="Photos"> Hello </div> <div id="Renders"> Hello </div> <div id="Videos"> Hello </div> <div id="Mods"> Hello </div> <button onclick="ShowGraphics()"> Click </button>