Onclick event problems

Question

I have an issue with my onclick event. I want to have a sub-menu within my page. I have 5 icons on my page. when I click on one icon, the other 4 icons disappear. when the 4 icons disappear, there will show up an couple of buttons to go to other pages.

my problem with this event is that the other buttons, don't show up. and i do not know what the problem is...

I made a video to show the problem;

https://youtu.be/F2NUj3KVIIk

my code;

<div id="column">
  <p id="afbeelding-spiraal">
    <img width="150" id="spiraal" src="https://www.spiralex.nl/wp-content/uploads/2020/12/spiraal-correct.png">
  </p>
</div>

<div id="column">
   <p id="afbeelding-plaat">
    <img width="150" id="plaat" src="https://www.spiralex.nl/wp-content/uploads/2020/12/platenwisselaar-correct.png">
   </p>
</div>

<div id="column">
  <p id="afbeelding-lucht">
    <img width="150" id="lucht" src="https://www.spiralex.nl/wp-content/uploads/2020/12/lucht-1.png">
  </p>
</div>

<div id="column">
   <p id="afbeelding-skids">
    <img width="150" id="skids" src="https://www.spiralex.nl/wp-content/uploads/2020/12/skids-correct.png">
   </p>
</div>

</div>


<div id="text">

<div id="text-buis">
    <button id="zwembadwarmtewisselaar">Zwembadwarmtewisselaar</button>
</div>

<script type="text/javascript">
var buis = document.getElementById("buis")
var spiraal = document.getElementById("spiraal")
var plaat = document.getElementById("plaat")
var lucht = document.getElementById("lucht")
var skids = document.getElementById("skids")

    buis.onclick = function(){
    if(spiraal.className ==""){
    
    spiraal.className = "hide";
    plaat.className = "hide";
    lucht.className = "hide";
    skids.className = "hide";
    zwembadwarmtewisselaar.className = "show";

Answer 1

You need to make a reference to zwembadwarmtewisselaar also.
var zwembadwarmtewisselaar = document.getElementById("zwembadwarmtewisselaar");