Show Hide (Toggle) Elements Using JavaScript.

Show Hide (Toggle) Elements Using JavaScript

In this tutorial, you will learn how to show hide (toggle) elements using JavaScript.

JavaScript Example to Show-Hide (toggle) Elements on Click of a Button

The following program will create a paragraph and a button, and on click of the button it will show or hide the paragraph element.

The script for the HTML HEAD part:

        background-color: #ffff00;
        font-weight: bold;
        display: none;
    window.onload=function() {
    function hideshow() {
        var msg = document.getElementById("msg");
        var hidden = msg.getAttribute("aria-hidden");
        if (hidden == "true") {
            msg.setAttribute("aria-hidden", "false");
        else {
            msg.setAttribute("aria-hidden", "true");

The code for the HTML BODY part:

<div id="msg">
        Click the button again to hide this paragraph.
<button id="button1">Hide/Show</button>


The output would be as shown in the featured image of this tutorial.

This Post Has One Comment

  1. Kumar

    Nice job

Comments are closed.