On Change Function How To Hide And Show Divs Using Jquery

admin_img Posted By Bajarangi soft , Posted On 16-01-2021

Learn how to hide and show the particular divs on change function in jquery.

on-change-function-hide-and-show-divs

Step 1:Create index.html and implement below html code in it.

<div class="container">
    <div class="row justify-content-center" id="main">
        <div class="col-md-6">
            <h2>On Change Hide And Show Div</h2>
            <form class="business_form contactusform" method="post" id="business_form" action="">
                <div class="form-group row">
                    <label>select Type</label>
                    <br>
                    <select name="type" id="types" class="form-control">
                        <option selected disabled>Select Type</option>
                        <option value="1">Type 1</option>
                        <option value="2">Type 2</option>
                    </select>
                </div>
            </form>
            <div class="type1_div" style="display: none">
                <p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
            </div>
            <div class="type2_div" style="display: none">
                <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The     passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum    et Malorum for use in a type specimen book.
</p>
            </div>

        </div>

    </div>
</div>

Step 2:Add script for Onchange Function
$(document).ready(function () {
    $('#types').on('change', function() {
       var val = $(this).val();
       if(val == '1'){
            $('.type1_div').show();
            $('.type2_div').hide();
       }
       else{
           $('.type1_div').hide();
           $('.type2_div').show();
       }
    });
});

Complete Code For On Select Hide And Show Divs Using JQuery.
<html>
<head>
    <title>On Change Hide And Show</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<main  class="py-4" style="margin-top: 80px">
    <div class="container">
        <div class="row justify-content-center" id="main">
            <div class="col-md-6">
                <h2>On Change Hide And Show Div</h2>
                <form class="business_form contactusform" method="post" id="business_form" action="">
                    <div class="form-group row">
                        <label>select Type</label>
                        <br>
                        <select name="type" id="types" class="form-control">
                            <option selected disabled>Select Type</option>
                            <option value="1">Type 1</option>
                            <option value="2">Type 2</option>
                        </select>
                    </div>
                </form>
                <div class="type1_div" style="display: none">
                    <p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
                </div>
                <div class="type2_div" style="display: none">
                    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
                </div>

            </div>

        </div>
    </div>
</main>

<script>
    $(document).ready(function () {
        $('#types').on('change', function() {
           var val = $(this).val();
           if(val == '1'){
                $('.type1_div').show();
                $('.type2_div').hide();
           }
           else{
               $('.type1_div').hide();
               $('.type2_div').show();
           }
        });
    });

</script>
</body>
</html>

Related Post