Put buttons under each other that don't leave space when hidden-CodePudding

I'm trying to create a Navigation field for my website, and I would like my buttons to be underneath each other with a white line in between. I have managed to get this part working by adding two line breaks next to the button, as seen here:

<button id = "next" onclick="next()">
    Volgende
</button><br><br>

I'm wondering if it's possible to have them show up like this, but if I hide the button, have the other buttons jump up, so they fill the gap and jump back down when the button becomes visible again.

Thanks in advance!

CodePudding user response：

<br> is not a good practice for cross-browser perspective, kindly use the standard way by using margin and display:block property of css.

So your html will be like:

<button class="mb-20px d-block" id = "next" onclick="next()">
    Volgende
</button>

And add below line in your css

.mb-20px { margin-bottom: 20px; }
.d-block { display: block; }

CodePudding user response：

Don't use line breaks for layout. That's a misuse of their purpose, which is to break text.

Just put your buttons in block-level (or inline-block level) containers, like divs. Obviously you'd hide and show the containers, not the buttons.

.button-container:not(:first-child) {
  border-top: 1px solid red;
  padding-top: 4px;
  margin-top: 4px;
}

<div id="next-btn-container" class="button-container">
  <button id="next" onclick="next()">Volgende</button>
</div>

<div id="other-btn-container" class="button-container">
  <button id="other" onclick="next()">Volgende</button>
</div>

<div id="another-btn-container" class="button-container">
  <button id="another" onclick="next()">Volgende</button>
</div>