blank space between one div and another because of the hidden fields

Navigation
0

When we have hidden fields between fields that are not hidden spaces are considered and the form looks bad. I would like to know if there is any way to remove these blanks from the displayed divs? 

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="lolkittens" />

    <title>Untitled 1</title>
</head>

<script language="javascript">

    function Mudarestado() {

          document.getElementById("ts1").style.visibility = "visible";
          document.getElementById("ts2").style.visibility = "visible";
          document.getElementById("ts3").style.visibility = "visible";
          document.getElementById("ts4").style.visibility = "visible";
          document.getElementById("ts5").style.visibility = "visible";
          document.getElementById("ts6").style.visibility = "visible";
          document.getElementById("ts7").style.visibility = "visible";
          document.getElementById("ts8").style.visibility = "visible";
          document.getElementById("bt1").style.visibility = "visible";

    }

    function Mudarestado2() {

          document.getElementById("ts11").style.visibility = "visible";
          document.getElementById("ts12").style.visibility = "visible";
          document.getElementById("ts13").style.visibility = "visible";
          document.getElementById("ts14").style.visibility = "visible";
          document.getElementById("ts15").style.visibility = "visible";
          document.getElementById("ts16").style.visibility = "visible";
          document.getElementById("ts17").style.visibility = "visible";
          document.getElementById("ts18").style.visibility = "visible";
          document.getElementById("ts19").style.visibility = "visible";
          document.getElementById("ts20").style.visibility = "visible";
          document.getElementById("ts21").style.visibility = "visible";
          document.getElementById("ts22").style.visibility = "visible";
          document.getElementById("bt2").style.visibility = "visible";

    }

</script>

<body>

<div style="width:100%; height: 200px; background-color: #8080FF;">


</div >

<div style="width:100%; height: 700px; background-color: gray;">

    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><label>cargo</label><input type="text"></div><br />
    <div><input type="button" value="mudar estado" onclick="Mudarestado()"></div>

    <div id="ts1" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts2" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts3" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts4" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts5" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts6" ><label>cargo</label><input type="text"></div><br />
    <div id="ts7" ><label>cargo</label><input type="text"></div><br />
    <div id="ts8" ><label>cargo</label><input type="text"></div><br />
    <div id="bt1" style="visibility: hidden"><label>cargo</label><input value="mudar estado 2" type="button" onclick="Mudarestado2()"></div><br />
    <div id="ts11" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts12" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts13" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts14" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts15" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts16" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts17" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts18" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts19" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts20" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts21" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />
    <div id="ts22" style="visibility: hidden"><label>cargo</label><input type="text"></div><br />


</div>

<div style="width:100%; height: 200px; background-color: #FF8000;">
    <div><label>os 700 pixels acaba no fim da tarja laranja</label></div>
</div>

</body>
</html>
    
asked by anonymous 15.07.2016 / 00:40

2 answers

1

The correct way to do this is to use CSS, or JavaScript classes associated with the DOM structure.

Being in this way, inline in style of HTML and functions in JavaScript with a command for each ID is a nightmare. True.

I leave a suggestion to rethink the code, and use a way that makes code maintenance easier, and is more scalable. 

function Mudarestado() {
     var inputs = document.querySelectorAll('#campos > div');
     for (var i = 0; i < inputs.length; i++) {
         var el = inputs[i];
         el.classList.toggle('escondido');
     }
 }
.escondido {
    display: none;
}

#campos > div {
	padding: 8px 5px;
}
<div id="campos" style="width:100%; background-color: gray;">

    <div>
        <label>cargo</label>
        <input type="text">
    </div>
    <div>
        <label>cargo</label>
        <input type="text">
    </div>
    <div>
        <label>cargo</label>
        <input type="text">
    </div>
    <div>
        <label>cargo</label>
        <input type="text">
    </div>
    <div>
        <label>cargo</label>
        <input type="text">
    </div>
    <div>
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts1" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts2" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts3" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts4" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts5" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts6">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts7">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts8">
        <label>cargo</label>
        <input type="text">
    </div>

    <div id="ts11" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts12" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts13" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts14" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts15" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts16" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts17" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts18" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts19" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts20" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts21" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
    <div id="ts22" class="escondido">
        <label>cargo</label>
        <input type="text">
    </div>
</div>

<div>
    <input type="button" value="Mudar estado" onclick="Mudarestado()">
</div>

jsFiddle: link

Notes:

  • In this example I did not clear all the style="xxx" you have inline in HTML. This should be done with external CSS to HTML whenever possible.

  • as @bacco mentioned these <br /> are not being treated by your JavaScript. In fact you should not even have them in this way, you can use CSS with margin or padding to move elements apart and create space between elements of the page.

15.07.2016 / 00:57
0

Use the display, with visibility the element will continue occupying the space even with the hidden 

document.getElementById("bt1").style.display = "none";
    
15.07.2016 / 00:49
Still images on the side with content only scrolling Problems generating a table [closed]