Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Hide/Show Toggle

Posted by: Slushie Apr 1 2020, 08:39 PM

Hopefully this will be an easy fix for someone.
I'm trying to implement the Hide/Show toggle at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show

The script part of it is

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

My question is, the page always starts with the item being shown, not hidden. How do I make it when the page is first loaded the item is hidden, not shown?

Thanks for any help with this.

Posted by: pandy Apr 1 2020, 09:28 PM

Basically you just need to set #myDIV to display: none since the script you already have checks if display is none and if it is it sets it to block. If display is something other than none it sets it to none. So it doesn't matter what it is to start with for the script to work.

But it's bad practice to hide a toggle object by default because users without JS can't make it visible. For that reason it's better to let JS hide it when the page loads. That way it will always be visible if JS isn't available. The whole script block would look something like this.

CODE

The function I called init() will hide #myDIV. The last line (window.onload...) will run that function when the page loads.

I would place the whole script block in HEAD rather than where it is in the example at w3schools though. If nothing else, it's neater.

Posted by: Slushie Apr 2 2020, 09:01 PM

Thank you pandy! I appreciate it.

That worked perfectly.

Posted by: pandy Apr 2 2020, 09:05 PM

Good.