Question 219287 in Html Question posted in
Some basic documentation can be found here.

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

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? Thanks so much!!!

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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;
}

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search