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

Last updated: 6th September 2024

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

I have shared two different methods here.

1) Show/Hide or Toggle Element using JavaScript

First, we'll see the JavaScript method.

This method is very simple. I have a SELECT dropdown list on my web page and a DIV element that has two textboxes. I'll use the display property of <div> to "show or hide" the element. The CSS display property specifies the display behavior of an element.

The Markup and the Script

<html>
<body>
    <!--select option from the list to show/hide DIV element-->
    <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() {
        const 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 (the container) 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'.

2) Show/Hide or Toggle Element using jQuery

In jQuery, you can use one of its built-in method called toggle(), to show and hide elements. Its very simple.

<html>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <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 write 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). For example,

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

← PreviousNext →