Why my show hide button needs double-click on first time

by

To achieve expected result, use below option of checking display initially which will be empty if it is not inline

x.style.display === "none" || x.style.display === ""

Please refer this link for more details – Why element.style always return empty while providing styles in CSS? 

function showhidemenu() {
  var x = document.getElementById("menu");
  if (x.style.display === "none" || x.style.display === "") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
#menu {
  background: rgba(0, 0, 0, 0);
  position: absolute;
  z-index: 1;
  top: 60px;
  right: 50px;
  width: 150px;
  font-family: 'Open Sans', sans-serif;
  display: none;
}
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>

More Related Contents:

  1. How to Toggle a div’s visibility by using a button click
  2. Difference between jQuery’s .hide() and setting CSS to display: none
  3. How to hide css and js version details from weppalyzer in PHP
  4. Replacing css file on the fly (and apply the new style to the page)
  5. How to autosize a textarea using Prototype?
  6. Textarea Auto height [duplicate]
  7. How to change CSS property using JavaScript
  8. Relative Paths in Javascript in an external file
  9. Dynamically loading css stylesheet doesn’t work on IE
  10. Why write when the mime type is set by the server?
  11. Positioning element at center of screen
  12. Using jQuery how to get click coordinates on the target element
  13. Is it possible to dynamically scale text size based on browser width?
  14. flow 2 columns of text automatically with CSS
  15. Responsive horizontal page sliding
  16. Need to find height of hidden div on page (set to display:none)
  17. Blur Img’s & Div’s in HTML using CSS
  18. Change Button color onClick
  19. What are the possible ways to hide an element via CSS [closed]
  20. Google Maps API v3: InfoWindow not sizing correctly
  21. What are some good ways to prevent people from copying my source code? [closed]
  22. Scroll Position of div with “overflow: auto”
  23. Auto Mobile Site Redirect
  24. Styling Vuetify selectors
  25. Is it possible to make input fields read-only through CSS?
  26. Detect if dropdown navigation would go off screen and reposition it
  27. Iframe inherit from parent
  28. How to change button text or link text in JavaScript?
  29. Freeze Header until Irrelevant (HTML, CSS and JS)
  30. Bootstrap Dropdown menu is not working

Leave a Comment