Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 24 Jan, 2023
Improve Article
Save Article

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:

Example: This example implements the above approach. 

HTML




<head>
    <style>
        #div {
            display: none;
            background: green;
            height: 100px;
            width: 200px;
            color: white;
        }
    </style>
      
    <link rel="stylesheet" 
             href=
  
    <script src=
    </script>
</head>
<body>
    <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>


Output:

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

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

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. 

html




<head>
   <style>
        #div {
            display: none;
            background: green;
            height: 100px;
            width: 200px;
            color: white;
        }
    </style>
      
    <link rel="stylesheet" 
             href=
      
    <script src=
    </script>
</head>
<body>
    <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 toggler(divId) {
            $("#" + divId).toggle();
        }
          
        function GFG_Fun() {
            toggler('div');
            $('#GFG_DOWN').text("DIV Box is toggling.");
        }
    </script>
</body>


Output:

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

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!