javascript - How to hide div onclick and show onclick using jquery

Question

I'm integrating a search suggest function in a oscommerce script. The function is working properly, but I need to create a div hide onclick and shown on input click using Jquery (with animation speed) since when i start typing the div appears but cannot be hidden (I have to refresh the web page to remove the search suggest div)

The events will be created under this div:

<div id="smartsuggest"></div>

Here is my code:

$data = '<div class="search">'."
".
tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get', 'id="frmSearch"')."
".//     '     <label class="fl_left">'.MODULE_BOXES_SEARCH_HEADER_BOX_TITLE.': </label>' ."
".
'       '.tep_draw_button_search_top().tep_draw_button(MODULE_BOXES_SEARCH_HEADER_BOX_TITLE).tep_draw_button_search_bottom()."
".
'       <div class="input-width">'."
".
'       <div class="width-setter">'."
".
tep_draw_input_field('keywords', MODULE_BOXES_SEARCH_HEADER_BOX_INPUT, 'id="txtSearch" onkeyup="searchSuggest(event);" autocomplete="off" size="10" maxlength="300" class="go fl_left" onblur="if(this.value=='') this.value=''.MODULE_BOXES_SEARCH_HEADER_BOX_INPUT.''" onfocus="if(this.value ==''.MODULE_BOXES_SEARCH_HEADER_BOX_INPUT.'' ) this.value=''"').''.tep_hide_session_id()."
".
'           </div>'."
".
'       <div id="smartsuggest" ></div> '.
'       </div>'."
".'</form>'."
".
'</div>
<script type="text/javascript">
$(function(){
var mq = window.matchMedia( "(max-width: 480px)" );
if((mq.matches)) {
$(".input-width").click(function() {
$(this).animate({right: "0", width: "125px"}, 500);
});
$(".input-width input").blur(function(){
$(this).parent().parent().animate({right: "0", width: "125px"}, 500);
});
}else{
$(".input-width").click(function() {
$(this).animate({right: "0", width: "360px"}, 500);
});
$(".input-width input").blur(function(){
$(this).parent().parent().animate({right: "0", width: "190px"}, 500);
});
}

});
</script>
'."
";

// MOD: BOF - SmartSuggest
if (SMARTSUGGEST_ENABLED != 'false') {
    require(DIR_WS_CLASSES.'smartsuggest.php');
    $smartsuggest = new smartsuggest();
    $smartsuggest->output($data);
}
// MOD: EOF - SmartSuggest

Answer 1

By using Jquery hide() and show() methods you can do this..Try ...)

$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>