I have a javascript function with jquery that hides divs when an option is selected. It works almost perfectly, but when you return to a previous option, once you have chosen an option that opens div, the div that was opened before does not disappear any more (unless you choose one of the options that opens another div, so it changes) .
$(function(){
$("#motde").change(function(){
if($(this).val()=='mostrard'){
$('#justcausa').show();
$('#rescind').hide();
}
if ($ (this).val()=='mostrarc'){
$ ('#rescind').show();
$('#justcausa').hide();
}
if ($ (this).val()=='nada') {
$ ('rescind').hide();
$ ('justcausa').hide();
}
});
});
I put it in jsfiddle to make it easier to understand: link
What happens is that if you select options 2 or 3, it opens and changes the divs correctly, but if you choose another option later (switches from one option to one that does not open div), it does not do the divs disappear. For better understanding, select option 2, and then 4. The div opened because of option 2 should disappear, but this does not happen.
Why?