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.
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 ?
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 ?
Please Login to comment...