How to Show & Hide DOM Elements Using JavaScript

We often want to display portion in web pages as per user requirements. If some portion needs to be hidden or shown when necessary, then we provide a show-hide option.

Let’s see how to achieve this is JavaScript. Most of the times, we use CSS to the elements, but we also use style attribute when we are learning JavaScript. We will see both.

Using Style & JavaScript

In the below example, we are using button and paragraph (<p></p>). Button and paragraph have ids which we are going to use into JavaScript code to hide & show paragraph when a user clicks on the button.

In the example, you could see that paragraph is using style attribute style=”display: none”; to hide on the initial web page load.

 
<html>
  <head>
    <title>Tutorial Funda</title>
  </head>
  <body>
    <button id="quote">Show Quote</button>
    
    <p id="quoteBox" style="display: none; background-color: lightpink; border-style: double; width: 55%;">

        "When something is important enough, you do it even if the odds are not in your favor."
        - Elon Musk
    </p>
    
    <script src="./index.js"></script>
  </body>
</html>

In the above code we have already added index.js file reference in the HTML markup. Here is the code for js file.

  
 const quoteButton = document.getElementById("quote");

 quoteButton.addEventListener("click", function(){
    
    const quoteBoxPara = document.getElementById("quoteBox");

    if(quoteBoxPara.style.display==="none") { 
        
        quoteBoxPara.style.display="block";
        quoteButton.textContent="Hide Quote";
    }
    else {
         
        quoteBoxPara.style.display="none";
        quoteButton.textContent="Show Quote";
    }
});

Create these two files index.html & index.js in a single folder. Run index.html file in the browser & click on the button to show-hide paragraph.

Note: To setup, the JavaScript environment in the Visual Studio Code, follow the guide.

Using CSS Class & JavaScript

In the example below, you could see that paragraph is using CSS Class class=”quote-hide” to hide on the initial web page load.

Also, we have already added this CSS Class in the head section of the index.html file.

 
<html>
  <head>
    <title>Tutorial Funda</title>
    <style>
      .quote-hide {
          display: none;
       }
    </style>
  </head>
  <body>
    <button id="quote">Show Quote</button>
   
    <p id="quoteBox" class="quote-hide" style="background-color:lightseagreen; border-style: double; width: 55%;">
        "When something is important enough, you do it even if the odds are not in your favor."
        - Elon Musk
    </p>
    <script src="./index.js"></script>
  </body>
</html>

Let’s see the index.js code to perform show & hide for CSS Class.

  
const quoteButton = document.getElementById("quote");

 quoteButton.addEventListener("click", function(){
    
    const quoteBoxPara = document.getElementById("quoteBox");

    if(quoteBoxPara.classList.contains("quote-hide")) { 
        
        quoteBoxPara.classList.remove("quote-hide");
        quoteButton.textContent="Hide Quote";
    }
    else {
        quoteBoxPara.classList.add("quote-hide");
        quoteButton.textContent="Show Quote";
    }
});

This is how you show & hide any elements in DOM whether you are using Style or CSS Class to the element.

Using Style & JavaScript

Using CSS Class & JavaScript

Subscribe Now!