How do I make an HTML element hidden by default?-CodePudding

I wrote a function to show my span#note- element when span#note is clicked. I want to make span#note- hidden by default, but I can't.

My code:

<h1>Republic of Labrador<br>Sub-Presidential Elections <span onclick="showOnClick()" id="note" title="Not all candidates are listed, and the vote ratioes for the listed candidates are approximated.
            Hover over a candidate's name to see their vote ratio.">&#9432;</span></h1>
    <br>
    <span id="note-">Not all candidates are listed, and the vote ratioes for the listed candidates
        are approximated.<br>Hover over a candidate's name to see their vote ratio.</span>
    <script>

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

My attempt at hiding span#note- by default:

<span id="note-" onl oad="hideOnLoad()">Not all candidates are listed, and the vote ratioes for the listed candidates
        are approximated.<br>Hover over a candidate's name to see their vote ratio.</span>
    <script>
        function hideOnLoad() {
            var y = document.getElementById("note-");
            y.style.display = "none";
        }
        function showOnClick() {
            var x = document.getElementById("note-");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>

I expected span#note- to be hidden by default.

CodePudding user response：

Your problem is the onl oad trigger, it won't work on a . You need to set your code like this, after your 2 functions:

document.addEventListener('load', () => {
    hideOnLoad();
})

That said, it would probably be better to set it as display: none; via CSS or style, and simply showing it when needed.

CodePudding user response：

I think you forgot to call your hideOnLoad() function. Either way I think you should hide the element by using CSS by using style="display: none;".

CodePudding user response：

onLoad only works on external resources such as images or the tag. If you want to keep your second example, you'll have to move the onl oad="hideOnLoad()" attribute all the way up to the body tag.

The simpler solution would be to just hide it as part of the initial style of the element style="display:none; in the html. Below is your first example with the element updated.

<h1>Republic of Labrador<br>Sub-Presidential Elections <span onclick="showOnClick()" id="note" title="Not all candidates are listed, and the vote ratioes for the listed candidates are approximated.
            Hover over a candidate's name to see their vote ratio.">&#9432;</span></h1>
    <br>
    <span id="note-" style="display: none;">Not all candidates are listed, and the vote ratioes for the listed candidates
        are approximated.<br>Hover over a candidate's name to see their vote ratio.</span>
    <script>

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

CodePudding user response：

It looks like your code is correct you just need to call each function. I'm getting it to work correctly when I run the code like this.

   function hideOnLoad() {
            var y = document.getElementById("note-");
            y.style.display = "none";
        }
        function showOnClick() {
            var x = document.getElementById("note-");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
        
showOnClick(); // Call onclick
hideOnLoad(); // Hide Span on default

CodePudding user response：

The easiest way to hide an element by default is with the CSS display property

You can simply add a CSS rule inline. Or you can follow better practice and create a separate CSS file.

1. Inline Rule:

<span id="note-" style="display:none;">any content here will not be displayed on initial load</span>

2. CSS File:

In your HTML file, in between the head tags atop the file:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Create a separate file, called styles.css. In that file:

span#note- {
  display: none;
}

More at CSS display. In addition to display, you can also try the visibility property if you want the content to take up its space on the page but just not show the content.

In your case, once you have used one of these CSS methods to hide the element, it will be hidden on initial load of the page, and then your showOnClick() script should work to toggle the display on and off.