CSS: Corrupt Display For Lower Elements After Show Upper Elements

as you see in my snippet when buttons are hidden => display:none; my display was what i want. but after showing them my display became a mess (Especially in bigger than 1300' Di

Solution 1:

finally i managed to full correct my code. this is final Demo

function Prev(current) {
  var prev_s = current.match(/\d/g);
  prev_s = prev_s.join("");
  prev_s--;
  prev_s = 'P_jmp' + prev_s;
  document.getElementById(prev_s).scrollIntoView();
}

function Next(current) {
  var next_s = current.match(/\d/g);
  next_s = next_s.join("");
  next_s++;
  next_s = 'N_jmp' + next_s;
  document.getElementById(next_s).scrollIntoView();
}

function btn_H_S(div_id) {
  document.getElementById(div_id).id = (div_id * (-1));
  if (div_id == "1") {
    for (x = 1; x < 14; x++) {
      document.getElementById("P_jmp" + x).style.display = "none";
      document.getElementById("N_jmp" + x).style.display = "none";
    }
  }
  if (div_id == "-1") {
    for (x = 1; x < 14; x++) {
      document.getElementById("P_jmp" + x).style.display = "block";
      document.getElementById("N_jmp" + x).style.display = "inline";
    }
  }
}

* {
  margin: 0;
  padding: 0;
  z-index: 0;
  position: relative;
}
body {
  min-width: 600px;
  max-width: 2000px;
  background: #444;
  padding-left: 5% auto;
  padding-top: 20px;
}
ul {
  width: 90%;
  margin: 0px auto;
}
li {
  list-style-type: none;
  overflow: hidden;
}
li.btn {
  text-align: center;
  display: block;
  background: #ccc;
  padding-top: 10px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  text-decoration: none;
  font-weight: bolder;
  font-family: calibri;
  font-size: 20px;
}
.separator {
  margin: 5px auto;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #E85039;
  overflow: visible;
}
.separator a {
  text-align: center;
  display: block;
  text-decoration: none;
  font-weight: bolder;
  font-size: 30px;
  color: white;
  text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}
ul>li>input {
  position: absolute;
  background: none;
  width: 5%;
  min-width: 50px;
  height: 100%;
  top: 12px;
  z-index: 100;
  font-size: 20px;
  height: 30px;
}
input.l {
  float: left;
  left: 2%;
}
input.r {
  float: right;
  right: 2%;
}
li+div {
  clear: both;
}
div > .lnk {
  display: block;
  font-weight: bolder;
  text-indent: 15px;
}
div > .lnk a {
  padding-top: 10px;
  padding-bottom: 12px;
  display: block;
  text-decoration: none;
  font-family: calibri;
  font-size: 20px;
}
@media all and (min-width: 1300px) {
  .lnk {
    min-width: 48%;
    float: left;
  }
  div > .lnk p {
    display: inline;
  }
  div > .lnk:nth-child(4n+1) {
    margin: 0% 2%;
  }
  div > .lnk:nth-child(4n+3) {
    margin-right: 2%;
    margin-left: 1%;
    width: 48%;
  }
  .separator {
    clear: both;
    width: 100%;
    display: block;
  }
  div > .lnk:nth-child(4n+1) a,
  div > .lnk:nth-child(4n+4) a {
    background: #848484;
    color: #F69C12;
  }
  div > .lnk:nth-child(4n+2) a,
  div > .lnk:nth-child(4n+3) a {
    background: #F8F8F8;
    color: black;
  }
  div > .lnk:last-child:not(:nth-child(even)):not(:first-child) {
    border-top: 3px dashed white;
  }
  div > .lnk:last-child:not(:nth-child(even)) {
    width: 98%;
  }
}
@media all and (max-width: 1299px) {
  .lnk {
    width: 100%;
  }
  div > .lnk:nth-child(odd) a {
    color: #F69C12;
    background: #848484;
  }
  div > .lnk:nth-child(even) a {
    background: #F8F8F8;
    color: black;
  }
}
div > .lnk:nth-child(1),
div > .lnk:nth-child(2) {
  margin-top: 15px;
}
div > .lnk:last-child,
div > .lnk:nth-last-child(2):not(:nth-child(even)) {
  margin-bottom: 15px;
}

<ul>
  <li class="btn" id="1" onclick="btn_H_S(this.id)">> Click To Show or Hide Buttons
    <<br/>
  </li>
  <li class="separator">
    <a href="">
      <----------------Buttons---------------->
    </a>
    <input class="l" id="P_jmp1" type="button" onclick="Prev('P_jmp4')" value="<<">
    <input class="r" id="N_jmp1" type="button" onclick="Next(this.id)" value=">>">
  </li>
  <div>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
  </div>
  <li class="separator">
    <a href="">
      <----------------Buttons---------------->
    </a>
    <input class="l" id="P_jmp2" type="button" onclick="Prev(this.id)" value="<<">
    <input class="r" id="N_jmp2" type="button" onclick="Next(this.id)" value=">>">
  </li>
  <div>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
  </div>
  <li class="separator">
    <a href="">
      <----------------Buttons---------------->
    </a>
    <input class="l" id="P_jmp3" type="button" onclick="Prev(this.id)" value="<<">
    <input class="r" id="N_jmp3" type="button" onclick="Next('N_jmp0')" value=">>">
  </li>
  <div>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
    <li class="lnk"><a href="">Wrong Display after buttons apear</a>
    </li>
  </div>
</ul>