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.
<!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:
.png)
