Hide an HTML element using JavaScript

By /
Views: 7

Hello, Everyone today in this post we are going to learn how to hide an HTML element using JavasScript.

In this tutorial or post, we learn to hide the HTML elements such as headings, paragraphs, images, and internal links.

The user can hide the HTML elements as desired, so we will create an option to show or hide the HTML elements.

Why do we need to hide HTML elements

The following reasons to hide HTML elements in a webpage. –

  1. Passwords are hidden for security reasons, such as when entering a password to access a user’s system.
  2. Hide the specific and targeted elements to increase the screen size and optimize the layout.
  3. Hide the unnecessary elements presently not in use to avoid distractions.
  4. Hide the detailed information on the webpage to maintain the screen size and help in optimization.

Steps to hide the HTML elements using JavaScript

  1. In the first step, create an HTML file named elements.html with the initial template in it a.k.a the boilerplate. 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

     

  2. In the 2nd step, create the CSS named c_elements.css and link it with the HTML file.
  3. In the 3rd step, create and insert some images and content through the image and paragraph tag.
  4. In the 4th step, create the button using the button tag which will help to hide or show the HTML elements 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide the HTML elements using JavaScript</title>
    <link rel = "stylesheet" href = "c_elements.css">
</head>
<body>
    <h1>Welcome Everyone</h1>
    <h2>Today we are going to hide the HTML elements using JavaScript</h2>
    <div class = "box1">
    </div>
    <button class = "button1">HIDE</button>
    <div class = "box2">
        <p>Iron Man is a fictional superhero and one of the main characters in the Marvel Cinematic Universe. His alter ego is Anthony Edward "Tony" Stark, a wealthy, genius inventor and industrialist who inherited Stark Industries from his parents. Tony uses his technological skills to create weapons of war for Stark Industries, including repulsor rays and booster jets that enable him to fly. In his Iron Man armor, Tony has super strength and can fly at supersonic speeds with the help of an arc reactor in his chest. He also has an artificial intelligence assistant named Jarvis who guides him in battle. 
        </p>
    </div>
    <button class = "button2">HIDE</button>
</body>
</html>

    The HTML file

  5. The CSS file 
    h1{
    text-align: center;
    text-decoration: underline;
}

h2{
    text-align: center;
    text-decoration: underline;
}

.box1{
    height: 200px;
    width: 200px;
    border-color: black;
    border-width: 2px;
    border-style: solid;
    margin-left: 650px;
    box-shadow: 0px 0px 10px 5px grey;
    background-image: url('https://i.pinimg.com/1200x/2b/f6/06/2bf60693ce109fd9ab48b13bb51729b0.jpg');
    background-size: cover;
    border-radius: 5px;

}

.box1:hover{
    cursor: pointer;
    transition-duration: 0.5s;
    transform: scale(1.05);
}

.button1{
    margin-left: 730px;
    margin-top: 30px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
}

.button1:hover{
    cursor: pointer;
    transition-duration: 0.5s;
    transform: scale(1.05);
}

.box2{
    border-color: black;
    border-width: 2px;
    border-style: solid;
    margin-top: 10px;
    padding-left: 10px;
    font-size: large;
    border-radius: 5px;
}

.button2{
    margin-left: 730px;
    margin-top: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
    
}

.button2:hover{
    cursor: pointer;
    transition-duration: 0.5s;
    transform: scale(1.05);
}

    Implement the HTML and CSS files to construct a basic layout or design of the webpage using different tags.

  6. In the next step, create a JavaScript file named ele.js and link it with the HTML file by using the script tag. 
    <script src = "ele.js" ></script>

    Code to hide the Image element

  7. In the next step, in the JavaScript file make the button functional to hide and show the elements respectively. 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide the HTML elements using JavaScript</title>
    <link rel = "stylesheet" href = "c_elements.css">
</head>
<body>
    <h1>Welcome Everyone</h1>
    <h2>Today we are going to hide the HTML elements using JavaScript</h2>
    <div class = "box1">
        <img id = "firstimg" src = "https://i.pinimg.com/1200x/2b/f6/06/2bf60693ce109fd9ab48b13bb51729b0.jpg">
    </div>
    <button id = "button1">HIDE</button>
<script src = "ele.js" ></script>
</body>
</html>

    The HTML file

    The CSS File

    h1{
    text-align: center;
    text-decoration: underline;
}

h2{
    text-align: center;
    text-decoration: underline;
}

.box1{
    height: 200px;
    width: 200px;
    border-color: black;
    border-width: 2px;
    border-style: solid;
    margin-left: 650px;
    box-shadow: 0px 0px 10px 5px grey;
    border-radius: 5px;
}

#firstimg{
    width: 200px;
    height: 200px;
}

.box1:hover{
    cursor: pointer;
    transition-duration: 0.5s;
    transform: scale(1.05);
}

#button1{
    margin-left: 730px;
    margin-top: 30px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
}

#button1:hover{
    cursor: pointer;
    transition-duration: 0.5s;
    transform: scale(1.05);
}

     

  8. In the next step, use the DOM concept i.e. the DOCUMENT OBJECT MODEL.
  9. This model creates an object in which all the HTML code is accessed through JavaScript.
  10. In the next step, create the object for the image and the JavaScript button to access the HTML code. 
    const button1 = document.getElementById("button1");
const firstimg = document.getElementById("firstimg");

    You can also create the same object by using the class

  11. In the next step use the DOM for using the multiple operations and the multiple conditions i.e. getEventListener.
  12. In the next step, create the (if and else statement) to create the conditional statement to display and hide the image. 
    button1.addEventListener("click", event =>{
    if (firstimg.style.display === "none"){
        firstimg.style.display = "block";
        button1.textContent = "HIDE";
    } 

    else{
        firstimg.style.display = "none";
        button1.textContent = "SHOW";
    }
});

    For example – If the display is in the shown condition then make the text content HIDE.

    This will hide the Image on the web page by using JavaScript

    If the display condition is in the none condition i.e. the image is not shown then make the text content SHOWN.

Code to Hide the Text Content

  1. In the next step, hide the HTML element that contains the text content.
  2. Repeat all the above steps used to hide the Image on the web page.
  3. The HTML file 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide the HTML elements using JavaScript</title>
    <link rel = "stylesheet" href = "c_elements.css">
</head>
<body>
    <h1>Welcome Everyone</h1>
    <h2>Today we are going to hide the HTML elements using JavaScript</h2>
    <div class = "box1">
        <img id = "firstimg" src = "https://i.pinimg.com/1200x/2b/f6/06/2bf60693ce109fd9ab48b13bb51729b0.jpg">
    </div>
    <button id = "button1">HIDE</button>
    <div class = "box2">
        <p id = "firstp">Iron Man is a fictional superhero and one of the main characters in the Marvel Cinematic Universe. His alter ego is Anthony Edward "Tony" Stark, a wealthy, genius inventor and industrialist who inherited Stark Industries from his parents. Tony uses his technological skills to create weapons of war for Stark Industries, including repulsor rays and booster jets that enable him to fly. In his Iron Man armor, Tony has super strength and can fly at supersonic speeds with the help of an arc reactor in his chest. He also has an artificial intelligence assistant named Jarvis who guides him in battle. 
        </p>
    </div>
    <button id = "button2">HIDE</button>
    <script src = "ele.js" ></script>
</body>
</html>

    The CSS file

    h1{
    text-align: center;
    text-decoration: underline;
}

h2{
    text-align: center;
    text-decoration: underline;
}

.box1{
    height: 200px;
    width: 200px;
    border-color: black;
    border-width: 2px;
    border-style: solid;
    margin-left: 650px;
    box-shadow: 0px 0px 10px 5px grey;
    border-radius: 5px;
}

#firstimg{
    width: 200px;
    height: 200px;
}

.box1:hover{
    cursor: pointer;
    transition-duration: 0.5s;
    transform: scale(1.05);
}

#button1{
    margin-left: 730px;
    margin-top: 30px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
}

#button1:hover{
    cursor: pointer;
    transition-duration: 0.5s;
    transform: scale(1.05);
}

.box2{
    border-color: black;
    border-width: 2px;
    border-style: solid;
    margin-top: 10px;
    padding-left: 10px;
    font-size: large;
    border-radius: 5px;
}

#button2{
    margin-left: 730px;
    margin-top: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
    
}

#button2:hover{
    cursor: pointer;
    transition-duration: 0.5s;
    transform: scale(1.05);
}

    The JavaScript file

    onst button1 = document.getElementById("button1");
const firstimg = document.getElementById("firstimg");

button1.addEventListener("click", event =>{
    if (firstimg.style.display === "none"){
        firstimg.style.display = "block";
        button1.textContent = "HIDE";
    } 

    else{
        firstimg.style.display = "none";
        button1.textContent = "SHOW";
    }
});

const button2 = document.getElementById("button2");
const firstp = document.getElementById("firstp");

button2.addEventListener("click", event => {
    if (firstp.style.display === "none"){
        firstp.style.display = "block";
        button2.textContent = "HIDE";
    }

    else{
        firstp.style.display = "none";
        button2.textContent = "SHOW";
    }
});
    This will hide both the Image and the Text Content on the web page

    The above 3 codes will hide both HTML elements i.e. the image and text content. Final Output.

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top