When creating web pages it is often helpful in your design to add an element of the page hidden and reveal it when a button is clicked or some other event happens. In this post I am going to be showing you in a very simple example how to take an HTML element and toggle it between hidden and not hidden.

Base HTML

The code snippet below is the HTML code we will use to start with.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
    <h1>Hiding a Div!</h1>
    <button>Click to toggle div</button>
    <div id="targetDiv" hidden>
        <h3>Contents</h3>
        <p>This is the contents of your div</p>
    </div>
</body>
</html>

As you can see this is a very basic page and if you paste the contents of it into a file and open that file in a web browser the button is not able to unhide the div we have specified as hidden.

 

How to solve this problem

We could have the button post to our server and have the server return a diferent render of the HTML but this is not a very clean way of exposing or hiding elements. For this problem often JavaScript is our best friend here. Below I have a code snippet that will take the element id as an argument and modify the DOM to hide or expose your element.

function toggleHidden(elementID) {
    /*
    Takes an element ID as an argument and will mark it as hidden if its not hidden
    and mark it as not hidden if its hidden
     */
    var x = document.getElementById(elementID);
    if (x.hasAttribute('hidden')) {
        x.removeAttribute('hidden')
    } else {
        x.setAttribute('hidden', true)
    }
}

First it gets our element by its ID that we passed in and stores that in the variable 'x', then it checks to see if it has the attribute of 'hidden' and if it does it removes the attribute, if it doesn't it adds the attribute.

As you can see this is a very simple function, now in the code snippet below I add that function inside a script tag below the closing body tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
    <h1>Hiding a Div!</h1>
    <button>Click to toggle div</button>
    <div id="targetDiv" hidden>
        <h3>Contents</h3>
        <p>This is the contents of your div</p>
    </div>
</body>
<script>
    function toggleHidden(elementID) {
    /*
    Takes an element ID as an argument and will mark it as hidden if its not hidden
    and mark it as not hidden if its hidden
     */
    var x = document.getElementById(elementID);
    if (x.hasAttribute('hidden')) {
        x.removeAttribute('hidden')
    } else {
        x.setAttribute('hidden', true)
    }
}
</script>
</html>

Now if you were to run the code snippet above, the button would still not toggle our div because we have not tied our button to call the JavaScript function. Below is the final code snippet, take a look at the button tag and you can see how we used the 'onclick' attribute to call our JavaScript function and we passed in the ID of our div tag which we set to 'targetDiv'.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
    <h1>Hiding a Div!</h1>
    <button onclick="toggleHidden('targetDiv')">Click to toggle div</button>
    <div id="targetDiv" hidden>
        <h3>Contents</h3>
        <p>This is the contents of your div</p>
    </div>
</body>
<script>
    function toggleHidden(elementID) {
    /*
    Takes an element ID as an argument and will mark it as hidden if its not hidden
    and mark it as not hidden if its hidden
     */
    var x = document.getElementById(elementID);
    if (x.hasAttribute('hidden')) {
        x.removeAttribute('hidden')
    } else {
        x.setAttribute('hidden', true)
    }
}
</script>
</html>

Now if you save that code into a file and open it in your browser you will see that when you click the button the contents of the div appear and when you click the button again the div contents disappear.

Thats all there is to hiding and exposing elements within an HTML page, although it can sound complex to beginners it is extremely simple to do.