toggle div. Get to know show until toggle

Question

I'm trying to create an onclick div. I have a simple problem, but I don't know how to solve it, because I'm still new to javascript.

My div is showing when I load the page. I want it to not show until it is toggled.

I imagine this is a simple change in the php.

Thank you.

function myFunction() {
    var x = document.getElementById("onclickmenu");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

#onclickmenu {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}

<button onclick="myFunction()">Menu</button>

<div id="onclickmenu">
    <p> hej</p>
</div>

A Macdonald · Answer 1 · 2018-06-25T06:54:35.073

0

add display:none to your #onclickmenu css

#onclickmenu {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display: none;
}

edit because the getter is element.style.display this needs to be an inline style attribute:

<div id="onclickmenu" style="display:none;">

A better way to do this whole thing is to use a css class that hides the the element and use jQuery to toggle that class instead.

edited Jun 25 '18 at 06:54

answered Jun 22 '18 at 14:45

A Macdonald

814
1
7
10

thx. When I do this the div is not shown until i press the button twice. after that it toggles the div on and off. I guess this is because it will initially display the div without showing it. Is there anyway to avoid this so visitors don't become confused when pressing the button? – NoCSStoday Jun 22 '18 at 14:55
ah ok use an inline atyle to get round this e.g
– A Macdonald Jun 23 '18 at 19:34

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

When the page initially loads, the div has its styling set to what you've defined in your css

#onclickmenu {
   width: 100%;
   padding: 50px 0;
   text-align: center;
   background-color: lightblue;
   margin-top: 20px;
}

Which means, by default, it will show up. You need to modify this css to initially hide the div.

 #onclickmenu {
   width: 100%;
   padding: 50px 0;
   text-align: center;
   background-color: lightblue;
   margin-top: 20px;
   display: none;  <--------- add this
 }

Then you can modify the element's style with javascript (as you are doing) to change the display parameter to block.

Update

To solve the issue of the initial click not showing the div, it looks like the first iteration of your function has x.style.display set to undefined. I didn't have time to dig into why this is the case, but the workaround is simple:

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

The added part of the if statement checks if x.style.display is defined, and if it is not (or the display is none), it sets the display to block

thx. When I do this the div is not shown until i press the button twice. after that it toggles the div on and off. I guess this is because it will initially display the div without showing it. Is there anyway to avoid this so visitors don't become confused when pressing the button? — NoCSStoday, Jun 22 '18 at 14:55
I'm not certain why, but for some reason x.style.display is set to undefined on the first call. I would update your if statement to include !x.style.display || x.style.display == "none" which basically means "if this is undefined or set to none, do this thing" — Marshall Tigerus, Jun 22 '18 at 15:14

score 0 · Answer 3 · answered Jun 22 '18 at 14:50

0

If you want by defulat to be hidde, and when the button clicked to show it, just add a display:none to the css of #onclickmenu.

answered Jun 22 '18 at 14:50

danny barlev

224
1
4

thx. When I do this the div is not shown until i press the button twice. after that it toggles the div on and off. I guess this is because it will initially display the div without showing it. Is there anyway to avoid this so visitors don't become confused when pressing the button? – NoCSStoday Jun 22 '18 at 14:55

score 0 · Answer 4 · answered Jun 22 '18 at 15:58

You just hide it on load with JS or jQ.

jQuery:

 $(document).ready(function(){
    $('#onclickmenu').hide(); 
});

JavaScript:

(function() { //this is self executing on load 
   // here you put your code
    var x = document.getElementById("onclickmenu");
    x.style.display = "none"; 
})();

Just to suggest of using jQuery as it is way less writing and has lots of functions like in your case you could use show() or hide() and save 10 lines of code.

score 0 · Answer 5 · answered Jun 22 '18 at 16:12

Aww you just got nasty one. display is a bit special. details

But technically you set display initially to none

This is a good reason to use jQuery, a bit confusing in the beginning, but trust me worth the effort. Way faster programming more stable (cross browers for example). Getting started with jQuery

function myFunction() {
    var x = document.getElementById("onclickmenu");
    var display = x.currentStyle ? x.currentStyle.display : getComputedStyle(x, null).display;
    
    if (display === "block" ) {
        x.style.display = "none";
    } else {
      x.style.display = "block";
    }
}

#onclickmenu {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
    display: none; /* hidden by default */}

<button onclick="myFunction()">Menu</button>

<div id="onclickmenu">
    <p> hej</p>
</div>

toggle div. Get to know show until toggle

5 Answers5

Update