CODEWITHSUNDEEP
javascripthtmlcss
med baha
med baha

Reputation: 80

show and hide javascript

Issue: when i use style.display none it pulls all objects loses their positions and my table take other width and my graphic web through up my 1-designed without using show and hide enter image description here 2- when i use the show and hide function enter image description here enter image description here goal: is to fix this issue making my graphic fixed as designed without using show and hide

html,body {
    background-image: url('../icones/ain.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.container{
    margin-top: 200px;
}
.table{
    display: inline-block;
    width: 500px;
    margin: 30px;
}
.button12{
    background-color: #60AAEB;
    border:0;
    margin-left:150px
}
.row{
    margin:200px 300px
 }
 .xy{
     background-image: url('../icones/ctb.png');
     background-repeat: no-repeat;
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/stylesheet.css" integrity="" crossorigin="anonymous">
    <link rel="stylesheet" href="css/dfirgo.css" integrity="" crossorigin="anonymous">
    <meta charset="UTF-8">
    <title>FRIGO</title>
</head>
<body>


    <div class="row" id="rb">
        <?php
        session_start();
        if(empty($_SESSION['prenon'])){
            header("location:index.php");
        }
        else {
        include("php/connexion.php");
        $rec = mysqli_query($conn, "SELECT * FROM espace");

        $i=0;
        while($row=mysqli_fetch_array($rec)) {
              $i++;
            if( $row[2]=='0' && $row[3]=='0'){
                $j=0;
            }else {$j=1;}
            echo"<table class=\"table\">
                <thead class=\"thead-dark\">
                <tr> 
                    <th width='400'><img src=\"icones/neige.png\">ESPACE$i<button class='button12' id='bo$i'onclick=\"myFunction('$i','$j')\"><img  src=\"icones/élément1.png\" ></button> <img id='do$i' src='icones/red.png'style='position: fixed; display:none'><img id='lo$i' src='icones/gren.png'style='position: fixed; display:none'></th>
                </tr>   
                </thead>
                <tbody>
                <tr id=$i style='display:none;'>
                    <td bgcolor='white' >";
                     echo "<div class='xy' >".$row[1]."</div>"." - "."<img src=\"icones/termo.png\">".$row[2]." - <img src=\"icones/water.png\">".$row[3];
                  echo  " </td>
                </tr>

                </tbody>
            </table>";
        }
        }
       ?>

    <script>
        function myFunction(i,j) {
            var l='do'+i;
            var m='lo'+i;
            var x = document.getElementById(i);
            var y = document.getElementById(l);
            var z = document.getElementById(m);
            if(j==='0'){
                y.style.display = "block";
            }
            else {
                z.style.display = "block";
            }
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
                z.style.display = "none";
                y.style.display = "none";
            }
        }
    </script>
<script src="css/popper.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/slim.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/bootstrap.min.js.js" integrity="" crossorigin="anonymous"></script>
</body>
</html>

Upvotes: 1

Views: 70

Answers (1)

ADyson
ADyson

Reputation: 61904

display:none removes the element from the document flow, and other elements' positions will be adjusted to use the space previously occupied by the element.

You can use visibility:hidden if you simply want the element to appear and disappear without the layout being adjusted.

See also:

https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

What is the difference between visibility:hidden and display:none?

Upvotes: 3

Related Questions