title: jQuery click event search bar
body: <p>I have a jQuery issue I need help with. </p>
  
  <p>On my WordPress site I'm using a jQuery script for search bar. Currently there is a button and on click it shows up a search bar. I want that search bar to be visible by default (always). So I wouldn't have to click on a button, but instead have my search bar visible all the time. </p>
  
  <p>Here is html code:</p>
  
  <pre><code>&lt;div class="top-search-form"&gt;
    &lt;div class="gdl-search-button" id="gdl-search-button"&gt;&lt;/div&gt; 
    &lt;div class="search-wrapper"&gt;
      &lt;div class="gdl-search-form"&gt;
        &lt;form method="get" id="searchform" action="&lt;?php  echo home_url(); ?&gt;/"&gt;
          &lt;?php
            $search_val = get_search_query();
            if( empty($search_val) ){
              $search_val = __("Pretraga.." , "gdl_front_end");
            }
          ?&gt;  
          &lt;div class="search-text"&gt;
            &lt;input type="text" value="&lt;?php echo $search_val; ?&gt;" name="s" id="s" autocomplete="off" data-default="&lt;?php echo $search_val; ?&gt;" /&gt;
          &lt;/div&gt;
          &lt;input type="submit" id="searchsubmit" value="&lt;?php _e("Kreni", "gdl_front_end") ?&gt;" /&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br>
              </p>
  
  <p>And this is jQuery function:</p>
  
  <pre><code>var search_button = jQuery("#gdl-search-button");
  search_button.click(function(){
    if(jQuery(this).hasClass('active')){
      jQuery(this).removeClass('active');
      jQuery(this).siblings('.search-wrapper').slideUp(200);
    }else{
      jQuery(this).addClass('active');
      jQuery(this).siblings('.search-wrapper').slideDown(200);
    }
      return false;
  });
  jQuery("#gdl-search-button, .search-wrapper").click(function(e){
    if (e.stopPropagation){ e.stopPropagation(); }
    else if(window.event){ window.event.cancelBubble = true; }
  }); 
  jQuery("html").click(function(){
    search_button.removeClass('active');
    search_button.siblings('.search-wrapper').slideUp(200);           
  }); 
  </code></pre>