I would like to replicate the search form in WP Twenty Fourteen’s menu. I have tried to hide and show the search button with jQuery. My Problem is that the button is not sliding from left to right and right to left it just “appears” and “disappears”. If someone could take a look it would be great!
This is my HTML code

                  <div class="search">
                    <form class="form-inline" id="forminline"role="form">
                        <div class="input-group">
                             <span class="input-group-btn" id="btn-search">
                                <div class="btn btn-search"><i class="fa fa-search search-ico"></i></div>
                            </span>
                            <label class="sr-only" for="exampleInputEmail2"><?php _ex( 'Search for:', 'label', 'categories', 'lagnogruppen' ); ?></label>
                            <input style="display: none;" type="search" class="form-control form-search" id="box-search" placeholder="<?php echo esc_attr_x( 'Sök på hemsidan …', 'placeholder', 'lagnogruppen' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">  
                        </div><!-- /input-group -->
                </form>
              </div>

and this is my simple jQuery code

jQuery(document).ready( function(){
jQuery('#btn-search').click( function(event){
    event.stopPropagation();
    jQuery('#box-search').toggle();
});
jQuery('#box-search').click(function(event){
    event.stopPropagation();
            });
jQuery(document).click( function(){
    jQuery('#box-search').hide();
});

});

Read more here: Create searchform in menu as in WP Twenty Fourteen theme


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , , ,

Wordpress related questions and answers: