Currently, I have implemented a code for toggling a search bar and it is functioning properly. The toggle function is applied to the main div using a click function in jQuery. While the toggling works fine, there seems to be an issue when clicking on the input type within the main div. For some reason, this action triggers the toggling function causing the div to close. My goal is to prevent this toggle effect on the inner element (input type) when clicked.
Below is the HTML Code snippet:
<li class="desk-search" id="jq-search-slider">
<div class="block block-content search-drop" id="jq-search-drop" style="display: none;">
<form class="form minisearch active" name="searchform" id="search_mini_form" action="" method="get" onsubmit="return validateForm()">
<div class="field search">
<div class="control">
<input id="search" type="text" name="q" value="" placeholder="Search" class="input-text search-input" maxlength="128" role="combobox" aria-haspopup="false" aria-autocomplete="both" autocomplete="off">
<div id="search_autocomplete" class="search-autocomplete"></div>
</div>
</div>
</form>
</div>
</li>
Here is the jQuery code snippet being utilized:
jQuery( "#jq-search-slider" ).click(function(){
jQuery('#jq-search-drop').slideToggle();
});