title: expand search input bar on click bug
body: <p>Well, I´m trying to do a search input expands on click in my button class="expand".
  I already have this working but it have two bugs at least.
  The first is when I click in the button to expand de input, the input expands but then contract right away. I dont understand why this is happening.
  The second bug is wherever I click on my page the input expands and contracts right away. I think is to be using <code>$('html').click(function()</code> but I´m not see other way to do this. 
  Can you give a little help?</p>
  
  <p><strong>My jQuery:</strong>   </p>
  
  <pre><code> &lt;script type="text/javascript"&gt;        
          $(function() {
              $('button.expand').click(function() {
                  $('#test').width(0).show().animate({width: 180}, 500);
              });
              $('html').click(function() {
              $('#test').width(180).show().animate({width: 0}, 500);
          });
          });  
      &lt;/script&gt; 
  </code></pre>
  
  <p><strong>My Html:</strong></p>
  
  <pre><code>&lt;nav id="menu"&gt;
          &lt;ul&gt;
  
              &lt;li&gt;&lt;a href="Home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="About.html"&gt;About&lt;/a&gt;&lt;/li&gt;
  
  
              &lt;li&gt;
                    &lt;div id="search-container"&gt;
          &lt;span id="search" &gt;
               &lt;form  name="form1" &gt;
                  &lt;input id="test" type="search" placeholder="Search..." required="required" onfocus="if(this.placeholder == 'Search...') {this.placeholder=''}" onblur="if(this.placeholder == ''){this.placeholder ='Search...'}" /&gt;
                  &lt;button class="expand" type="submit"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
               &lt;/form&gt;
          &lt;/span&gt; 
      &lt;/div&gt;
              &lt;/li&gt;
             &lt;/ul&gt;
      &lt;/nav&gt;   
  </code></pre>
  
  <p><strong>My css:</strong>
  CSS:</p>
  
  <pre><code> .form-container input {display:none;}
  </code></pre>