Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to hide div element by default and show it on click using JavaScript and Bootstrap ?

  • Difficulty Level : Basic
  • Last Updated : 31 Dec, 2019

The task is to show a hidden div on click using Bootstrap. There are two methods to solve this problem which are discussed below:

Approach 1:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • Set display: none property of the div that needs to be displayed.
  • Use .show() method to display the div element.

Example: This example implements the above approach.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to hide div element by default
        and show it on click using 
        JavaScript and Bootstrap ?
    </title>
      
    <style>
        #div {
            display: none;
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    </style>
      
    <link rel="stylesheet" href=
      
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;"
        GeeksForGeeks 
    </h1>
      
    <p id="GFG_UP"></p>
      
    <div id="div">
        This is Div box.
    </div>
    <br>
      
    <button onClick="GFG_Fun()">
        click here
    </button>
    <br>
      
    <p id="GFG_DOWN" style="color: green;"></p>
      
    <script>
        $('#GFG_UP').text(
        "Click on button to toggle the DIV Box using Bootstrap.");
  
        function show(divId) {
            $("#" + divId).show();
        }
  
        function GFG_Fun() {
            show('div');
            $('#GFG_DOWN').text("DIV Box is visible.");
        }
    </script>
</body>
  
</html>

Output:



  • Before clicking on the button:
  • After clicking on the button:

Approach 2:

  • Set display: none property of the div that needs to be displayed.
  • Use .toggle() method to display the Div. However, this method can be used to again hide the div.

Example: This example implements the above approach.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to hide div element by default and
        show it on click using JavaScript and
        Bootstrap ?
    </title>
      
    <style>
        #div {
            display: none;
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }
    </style>
      
    <link rel="stylesheet" href=
      
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;"
        GeeksForGeeks 
    </h1>
      
    <p id="GFG_UP" style=
        "font-size: 19px;font-weight: bold;">
    </p>
      
    <div id="div">
        This is Div box.
    </div>
    <br>
      
    <button onClick="GFG_Fun()">
        click here
    </button>
    <br>
      
    <p id="GFG_DOWN"
        style="color: green;">
    </p>
      
    <script>
        $('#GFG_UP').text(
"Click on button to toggle the DIV Box using Bootstrap.");
  
        function toggler(divId) {
            $("#" + divId).toggle();
        }
  
        function GFG_Fun() {
            toggler('div');
            $('#GFG_DOWN').text("DIV Box is toggling.");
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:



My Personal Notes arrow_drop_up
Recommended Articles
Page :