How to use.show() method in Javascript

Set display: none property of the div that needs to be displayed.
Use the .show() method to display the div element.

Example: This example implements the above approach.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <style>
        #div {
            display: none;
            background: green;
            height: 100px;
            width: 200px;
            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>
    <h1 style="color:green;">
        w3wiki
    </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:

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

We have to first hide the div and when a user will click the button we need to display that hiden div on the screen. It is helpul for creating any type of form.

There are two methods to solve this problem which are discussed below:

Table of Content

Using .show() method
Using .toggle() method

Tags:

#Bootstrap-Questions #JavaScript-Questions #Bootstrap #JavaScript #Web Technologies

Approach 2: Using .toggle() method

How to use.show() method in Javascript

HTML

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

Similar Reads