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

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:
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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </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:
Bootstrap-Misc
JavaScript-Misc
Bootstrap
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to change the background color of the active nav-item?
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?