jQuery click event search bar

Question

I have a jQuery issue I need help with.

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.

Here is html code:

<div class="top-search-form">
  <div class="gdl-search-button" id="gdl-search-button"></div> 
  <div class="search-wrapper">
    <div class="gdl-search-form">
      <form method="get" id="searchform" action="<?php  echo home_url(); ?>/">
        <?php
          $search_val = get_search_query();
          if( empty($search_val) ){
            $search_val = __("Pretraga.." , "gdl_front_end");
          }
        ?>  
        <div class="search-text">
          <input type="text" value="<?php echo $search_val; ?>" name="s" id="s" autocomplete="off" data-default="<?php echo $search_val; ?>" />
        </div>
        <input type="submit" id="searchsubmit" value="<?php _e("Kreni", "gdl_front_end") ?>" />
        <div class="clear"></div>
    </form>
</div>

And this is jQuery function:

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);           
}); 

Answer 1

Remove the relevant .click event, and display: block the main search bar container in the CSS. (this should be enough to get you there)

---

1.) Remove the jQuery related to search bar show functionality. (eg. click event( s )).

2.) Alter .css file where search elements are display:none; or display:hidden; if a click event is showing them, then mostly likely they are display:none; in the css (more code would be beneficial for this reason) . You can comment out the click event for testing by wrapping this at the start <%-- and this at the end --%>

3.) Assure relevant css is now display:block; after step 2.) (But if you remove none; by default it should display)

If this doesn't work show full code or create an online demo with an online IDE like jSfiddle . ;)