I've created an HTML form with two different sections for search purposes. The first section displays basic fields, and by clicking on "Advanced Search" (in my case, "Расширенный поиск"), additional fields are revealed. Everything works fine until I try to hide the advanced fields - they disappear briefly but then reappear. Why is this happening?
Here's the code snippet:
$(document).on('click', '#advanced-search-show', function (){
$("#advanced-search-show-area" ).show("slow");
$("#advanced-search-show").html("<span id='advanced-search-hide'>Свернуть</span>");
});
$(document).on('click', '#advanced-search-hide', function (){
$("#advanced-search-show-area" ).hide("slow");
$("#advanced-search-show").html("<span id='advanced-search-show'>Расширенный поиск</span>");
});
$(document).on('click', '#reset-form', function (){
$(this).closest('form').find("input[type=text], textarea, input[type=number]").val("");
$(this).closest('form').find("input[type=checkbox]").attr('checked', false);
$(this).closest('form').find("input[type=select] option:eq(1)").prop('selected', true)
});
Check out the fiddle here: http://jsfiddle.net/8UV4c/
Any suggestions on how to fix this bug?