How to hide and show a div on click with Javascript with the consideration that it does not move all the content when visible

Question

I managed to hide and show a div using this Javascript code:

<script> 
    function myFunction() { 
      var x = document.getElementById("menudesplegable"); 
      if (x.style.display === "none") { 
        x.style.display = "block"; 
      } else { 
        x.style.display = "none"; 
      } 
    } 
    </script>

The issue I face is that when the element is not visible, it does not take any space, but when visible, it moves all the other content down. It is a menu toggle, so I need all the other content to be in the same position and this div to display on top. Is it possible?

Does this answer your question? [How to overlay one div over another div](https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div) — Matthew Herbst, Jul 30 '23 at 16:39

score 0 · Answer 1 · answered Jul 30 '23 at 16:46

What I understood from your question is. You want the meu content to overlay not push the down content. For that thing, you have to make changes in your design. make the content relative and give it z index 1. Here is CSS snippet for you.

<style>
  /* Styling for the menu button */
  #menuButton {
    position: relative;
    z-index: 1;
  }

  /* Styling for the menu */
  #menudesplegable {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f0f0f0;
    padding: 10px;
    z-index: 2;
  }
</style>

and here is the div content for more understanding.

<button id="menuButton" onclick="myFunction()">Toggle Menu</button>
<div id="menudesplegable">
  <!-- Your menu content goes here -->
</div>

and last your function! its okay no need to change.

score 0 · Answer 2 · edited Aug 03 '23 at 12:49

0

You could also use a CSS animation, as follows:

@keyframes messagebox-succeded-animation
{
    0% {
        opacity: 1;
        display: block;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: hidden;
    }
}

edited Aug 03 '23 at 12:49

Adrian Mole

49,934
160
51
83

answered Jul 30 '23 at 17:03

Marius Prakash

43
6

score 0 · Answer 3 · answered Aug 03 '23 at 12:54

0

Instead of display use visibility which will maintain the space/layout

visibility: visible;
visibility: hidden;

Reference https://developer.mozilla.org/en-US/docs/Web/CSS/visibility re: "without changing the layout of a document."

answered Aug 03 '23 at 12:54

Mark Schultheiss

32,614
12
69
100

How to hide and show a div on click with Javascript with the consideration that it does not move all the content when visible

3 Answers3