Wednesday 11 December 2013

HTML/CSS/jQuery - Show hide div when select option is selected


Hi in this small article i will show you how to show hide div when select (HTML Combobox) option is selected.

 1. Create a html page.
2. Add reference to jQuery script.
3. Design the page with one combobox and one div.
4. Write the jQuery script to show and hide the div when select (HTML Combobox) option is selected.

 Use the following script to to show and hide the div when select (HTML Combobox) option is selected.

HTML

<html>
<head>
    <!--load jQuery into your page by giving reference-->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Chage function call when you change the combobox value
            $("#action").change(function () {               
                var value = $("#action").val();
                //Show and hide the div tag based on the selected value of combobox.
                if (value == 'show') {
                    $("#divShowHide").show();
                }
                else {
                    $("#divShowHide").hide();
                }

            });
        });
    </script>
</head>
<body>
    Select Action:
    <select id="action">
        <option value="show">show</option>
        <option value="hide">hide</option>
    </select>
    <div id="divShowHide" style="height: 100px; width: 300px; background-color: gray; padding: 10px;">
        Sample Text
    </div>
</body>
</html>


Design




Design


Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)