Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I would like to replicate the search form in 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 &hellip;', '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();
});

});

share|improve this question

1 Answer 1

up vote 0 down vote accepted

.animate() is the jQuery function you're going to want to have a look at. Very handy.

Here's a working example for your particular question:

http://jsfiddle.net/B8Yv9/

And a complete html workup:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<style>
.search { width:300px; }

.input-group { position:relative; float:right; }

#btn-search { cursor:pointer; position:absolute; padding:3px 8px; }

input { width:0; padding-left:20px; border:1px solid transparent; }
</style>
</head>

<body>

<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">S</i></div>
            </span>
            <label class="sr-only" for="exampleInputEmail2"><?php _ex( 'Search for:', 'label', 'categories', 'lagnogruppen' ); ?></label>
            <input type="search" class="form-control form-search unhovered" id="box-search" placeholder="Search" name="s" />
        </div>
    </form>
</div>

<script>
$('#btn-search').click(function(){
    $('input').css('border-color', '#aaa').animate({
        'width' : 200
    }, 300).focus().queue(function(){
            $(this).addClass('toggled'); 
            $(this).dequeue();
        });
});

$('input').hover(
  function() {
    $(this).removeClass('unhovered');
  }, function() {
    $(this).addClass('unhovered');
  }
);

$(document).click(function(){
    if($('input').hasClass('toggled') && $('input').hasClass('unhovered')) {
        $('input').animate({
                'width' : 0
        }, 300).css('border-color', 'transparent').queue(function(){
            $(this).removeClass('toggled'); 
            $(this).dequeue();
        });;  
    }
});
</script>
</body>
</html>
share|improve this answer
    
This worked great! jQuery is next on my "to master" list.. :) @deflime –  HannesH Jul 1 at 21:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.