How to hide a div with nested div

Question

I am new to Javascript (and JQuery) and Web Development itself, so I'm having problems trying to show the whole content of the div service_info (that is hidden) when I select one the option in my <select> with id service_type .

Here is the code, using materialize.css and MDL both declared in the head tag. jQuery 2.2.1 is declared in the head tag before MDL's and materialize's scripts.

 $('#service_type').change(function() { $('#service_info').show('slide'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="input-field col s12"> <select id="service_type" name="service_type"> <option disabled selected value=""> Scegli un tipo di servizio </option> <option value="discharge"> Dimissioni </option> <option value="transfer"> Trasfermimento struttura </option> <option value="examination"> Visita di controllo </option> <option value="admission"> Ricovero in casa di cura o clinica </option> </select> </div> </div> <div class="col s12" id="service_info" hidden> <div class="row"> <div class="input-field col s4"> <input class="mdl-textfield__input" id="place_from" name="place_from" type="text"> <label for="place_from">Indirizzo del luogo di partenza</label> </div> <div class="input-field col s4"> <input class="validate" id="place_to" name="place_to" type="text"> <label for="place_to">Indirizzo del luogo di arrivo</label> </div> <div class="input-field col s4"> <input class="validate" id="section" name="section" type="text"> <label for="section">Reparto</label> </div> </div> </div> 

I cannot understand why nothing seems to happen.

Answer 1

 <script type="text/javascript">
     $(document).ready(function(){
     $('#service_type').change(function () {
                $('#service_info').show('slide');
            }); 
        });    
</script>