Show/Hide or Toggle a DIV Element based on Dropdown List 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="container" 
        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('container');
        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="container" 
        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();
        });
    });
</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.

That’s it. Thanks for reading.

Previous - Do you know you can Convert an HTML table to PDF without a Plug-in. Read this post and find out how.



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:

Join our Google Plus Community and be a part of a discussion!