$('.search').click(function() { var ths = $(this), form = ths.find('#cse-search-box'), int = ('input[type=text]'), val = form.find(int).val(); if(form.hide()) { form.show().find(int).focus(); } else if (val.length<=1) { form.hide(); } else { form.submit(); }; }); 
 .fa{padding:30px;background-color:red;margin-left:250px} #cse-search-box{display:none} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="search"> <div class="search-field"> <form action="/search.html" id="cse-search-box"> <input type="hidden" name="cx" value="partner-pub-xxx:xxx" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" placeholder="Поиск по сайту..." /> </form> </div> <i class="fa fa-search" title="Поиск по сайту"></i></div> </div>

There is a search icon and a form, by clicking on the icon a form should appear in which there is an input. The second click should determine if the input is empty, then hide the form, if not, then apply the submit condition for the form. I only have the first condition.

Only this part is executed if (form.hide ())

  • You execute the hide method in the condition. Of course, it will always be true and will never go further. The hide method sets the display property to none (correct if I am mistaken) -> Do you need to check "do I have a none in display?" - Mr. Brightside

1 answer 1

form.hide() as form.show() returns the same jQuery form wrapper, which in the Boolean sense corresponds to true .

  //if(form.hide()) { if(!form.is(":visible")) {