Show hide or toggle a DIV element based on dropdown selection using JavaScript or jQuery

Let us assume you have a DIV element that serves as a container and it has few more elements in it. You also have a SELECT dropdown list. Based on whatever you select from the dropdown list, it should show/hide or toggle the DIV element. I’ll show you how you can do this using jQuery toggle method and using plain JavaScript.

Related: How to show hide or toggle elements in Angular

Show/Hide or Toggle Element using JavaScript

The JavaScript method is very simple. I have a SELECT dropdown list on my web page and a DIV element that has two textboxes. In this method, I am using the display property of the <div> element to show or hide the element. The CSS display property specifies the display behavior of an element.

The Markup and the Script
<html>
<body>
    <p>JavaScript Example: Select an option from the dropdown list to "toggle" the DIV element!</p>
    <p>
        <select id="sel" onchange="toggle()">
            <option value="1" selected>Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </p>
  
    <div id="cont" 
        style="display:block;
        border:solid 1px #CCC;padding:10px;">

        Name: <input type="text" id="name" />
        Age: <input type="text" id="age" />
    </div>
</body>
<script>
    function toggle() {
        var cont = document.getElementById('cont');
        if (cont.style.display == 'block') {
            cont.style.display = 'none';
        }
        else {
            cont.style.display = 'block';
        }
    }
</script>
</html>
Try it


When I select an option from the dropdown list, it calls the function toggle(). It then gets the id of the <div> element and checks the display property of it.

if (cont.style.display == 'block') {

So, if the property is 'block' (means show) then set the property as 'none', or else, again set it to 'block'.

Show/Hide or Toggle Element using jQuery

The jQuery method of doing this is very straight. You don’t have to do much. You can simply use an in-build jQuery method called toggle() to show/hide any element.

<html>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
    <p>jQuery Example: Select an option from the dropdown list to "toggle" the DIV element!</p>

    <p>
        <select>
            <option value="1" selected>Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </p>
  
    <div id="cont" 
        style="border:solid 1px #CCC;padding:10px;">

        Name: <input type="text" id="name" />
        Age: <input type="text" id="age" />
    </div>
</body>
<script>
    $(document).ready(function () {
        $("select").change(function () {
            $("div").toggle();
            // Do you know: you can pass a paramter to the toggle() method,
            // such as "slow", "fast" or a value in millisecond.
        });
    });
</script>
</html>
Try it

If you have noticed, I have not set the display property of the <div> element at design time (which I did in my first example) and yet it toggles the element, as we want it to. You don’t have to worry about writing any conditions or check the element’s display property etc. The toggle() method toggles between show() and hide() methods of an element. You can attach this method with any element such as the <p> or <span> etc.

The toggle() checks the visibility property of the element and accordingly uses the show() and hide() methods to create a toggle effect.

The toggle() method also takes an optional parameter. You can set the speed of the toggle by passing a parameter to the method. The parameter can be slow, fast or any value in milliseconds (like 1000). Try these ...

$("div").toggle(1000);
$("div").toggle("slow");
or $("div").toggle("fast");

That’s it. Thanks for reading.

← PreviousNext →



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner

Related Posts: