Hide show div elements on click in javascript but I want the boxes to stay at their respective posit-CodePudding

If I may pick your brain? So far, I was able to do the hide and show but the problem is if we click the button for the blue box to be hidden, the red box will go to the place of the blue box. Hence, it may cause confusion.

I want that if we click that button, the blue box will just disappear and the red box should stay put, stay in its original position/location. I hope that makes sense. Your input will be very much appreciated.

// start for the green here -----------------------------------------------------
document.getElementById("button4green").addEventListener("click", function() // made a function to call on onclicking
  {

    let greenbox = document.getElementById("greendiv")

    //now add the condition
    if (greenbox.style.display == "none") {
      greenbox.style.display = "block";
    } else {
      greenbox.style.display = "none";
    }
  });
// end for the green here -----------------------------------------------------

// start for the blue here -----------------------------------------------------
document.getElementById("button4blue").addEventListener("click", function() // made a function to call on onclicking
  {
    let bluebox = document.getElementById("bluediv")
    //assigned a variable to it 

    //now add the condition
    if (bluebox.style.display == "none") {
      bluebox.style.display = "block";
    } else {
      bluebox.style.display = "none";
    }
  });
// end for the blue here ----------------------------------------------------

// start for the red here ---------------------------------------------------
document.getElementById("button4red").addEventListener("click", function() // made a function to call on onclicking
  {
    let redbox = document.getElementById("reddiv")


    if (redbox.style.display == "none") {
      redbox.style.display = "block";
    } else {
      redbox.style.display = "none";
    }
  });

#greendiv {
  width: 30%;
  height: 50%;
  background-color: green;
  float: left;
}

#bluediv {
  width: 30%;
  height: 50%;
  background-color: blue;
  float: left;
}

#reddiv {
  width: 30%;
  height: 50%;
  background-color: red;
  float: left;
}

<!------- green -------->
<input type="button" value="GREEN" id="button4green" style="position: absolute; left: 13%;">
<div id="greendiv">
greendiv
</div>

<!------- blue -------->

<input type="button" value="BLUE" id="button4blue" style="position: absolute; Left:43%">
<div id="bluediv">
bluediv
</div>

<!------- red -------->
<input type="button" value="RED" id="button4red" style="position: absolute; Left:74%">
<div id="reddiv">
reddiv
</div>

CodePudding user response：

The easiest way to do this is to use visibility:hidden/visible instead of display:none/block. It will not display the div but keep the space it occupies.

// start for the green here -----------------------------------------------------
document.getElementById("button4green").addEventListener("click", function() // made a function to call on onclicking
  {

    let greenbox = document.getElementById("greendiv")

    //now add the condition
    if (greenbox.style.visibility == "hidden") {
      greenbox.style.visibility = "visible";
    } else {
      greenbox.style.visibility = "hidden"
    }
  });
// end for the green here -----------------------------------------------------

// start for the blue here -----------------------------------------------------
document.getElementById("button4blue").addEventListener("click", function() // made a function to call on onclicking
  {
    let bluebox = document.getElementById("bluediv")
    //assigned a variable to it 

    //now add the condition
    if (bluebox.style.visibility == "hidden") {
      bluebox.style.visibility = "visible";
    } else {
      bluebox.style.visibility = "hidden";
    }
  });
// end for the blue here ----------------------------------------------------

// start for the red here ---------------------------------------------------
document.getElementById("button4red").addEventListener("click", function() // made a function to call on onclicking
  {
    let redbox = document.getElementById("reddiv")


    if (redbox.style.visibility == "hidden") {
      redbox.style.visibility = "visible"
    } else {
      redbox.style.visibility = "hidden"
    }
  });

#greendiv {
  width: 30%;
  height: 50%;
  background-color: green;
  float: left;
}

#bluediv {
  width: 30%;
  height: 50%;
  background-color: blue;
  float: left;
}

#reddiv {
  width: 30%;
  height: 50%;
  background-color: red;
  float: left;
}

<!------- green -------->
<input type="button" value="GREEN" id="button4green" style="position: absolute; left: 13%;">
<div id="greendiv">
greendiv
</div>

<!------- blue -------->

<input type="button" value="BLUE" id="button4blue" style="position: absolute; Left:43%">
<div id="bluediv">
bluediv
</div>

<!------- red -------->
<input type="button" value="RED" id="button4red" style="position: absolute; Left:74%">
<div id="reddiv">
reddiv
</div>

CodePudding user response：

Instead of hiding and showing box, you can change background color so box easily stay in its position. you can do it like below

<html>
    <head>
        <title>Blocks</title>
        <!--- styling these divs-->
        <style>
            #greendiv { 
                width: 30%;
                height: 50%;
                background-color: green;
                float: left;
            }

            #bluediv { 
                width: 30%;
                height: 50%;
                background-color: blue;
                float: left;
            }

            #reddiv { 
                width: 30%;
                height: 50%;
                background-color: red;
                float: left;
            }
        </style>

    </head>
    <body>
        <!------- green -------->
        <input type="button" value="GREEN" id="button4green" style="position: absolute; left: 13%;"> 
        <div id="greendiv">
        </div>

        <!------- blue -------->

        <input type="button" value="BLUE" id="button4blue" style="position: absolute; Left:43%"> 
        <div id="bluediv">
        </div>

        <!------- red -------->
        <input type="button" value="RED" id="button4red" style="position: absolute; Left:74%">
        <div id="reddiv">
        </div>

        <!----- Now add the JavaSCript----->
        <script>

            // start for the green here -----------------------------------------------------
            document.getElementById("button4green").addEventListener("click", function ()  // made a function to call on onclicking
            {


                let greenbox = document.getElementById("greendiv")

                //now add the condition
                if (greenbox.style.background == "white")
                {
                    greenbox.style.background = "green";
                } else
                {
                    greenbox.style.background = "white";
                }
            });
            // end for the green here -----------------------------------------------------

            // start for the blue here -----------------------------------------------------
            document.getElementById("button4blue").addEventListener("click", function ()  // made a function to call on onclicking
            {
                let bluebox = document.getElementById("bluediv")
                //assigned a variable to it 

                //now add the condition
                if (bluebox.style.background == "white")
                {
                    bluebox.style.background = "blue";
                } else
                {
                    bluebox.style.background = "white";
                }
            });
            // end for the blue here ----------------------------------------------------

            // start for the red here ---------------------------------------------------
            document.getElementById("button4red").addEventListener("click", function ()  // made a function to call on onclicking
            {
                let redbox = document.getElementById("reddiv")


                if (redbox.style.background == "white")
                {
                    redbox.style.background = "red";
                } else
                {
                    redbox.style.background = "white";
                }
            });

        </script>
    </body>

</html>