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

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:

  • 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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.