title: Search bar with jquery
body: <p>Okay, so I'm writing a UI for an entertainment suite some friends are making. So far, I've got the following search bar: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function($,c,b){$.map("click dblclick mousemove mousedown mouseup mouseover mouseout change select submit keydown keypress keyup".split(" "),function(d){a(d)});a("focusin","focus"+b);a("focusout","blur"+b);$.addOutsideEvent=a;function a(g,e){e=e||g+b;var d=$(),h=g+"."+e+"-special-event";$.event.special[e]={setup:function(){d=d.add(this);if(d.length===1){$(c).bind(h,f)}},teardown:function(){d=d.not(this);if(d.length===0){$(c).unbind(h)}},add:function(i){var j=i.handler;i.handler=function(l,k){l.target=k;j.apply(this,arguments)}}};function f(i){$(d).each(function(){var j=$(this);if(this!==i.target&amp;&amp;!j.has(i.target).length){j.triggerHandler(e,[i.target])}})}}})(jQuery,document,"outside");
  
  var clicked;
  
  $( document ).ready( function () {
      clicked = false;
      $(".search").click( function () {
          if (clicked == false) {
              $(".search").toggleClass("active");
              clicked = true;
          } else {
              $(".search").bind( "clickoutside", function(event){
                  $(".search").toggleClass("active");
                  clicked = false;
              });
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.search.active {
    background: rgba(0,0,0,0.4);
    width: 500px;
  }
  
  .search {
    margin-top: 25px;
    margin-right: 25px;
    background-color: #448aff;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    text-align: center;
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    transition: all 500ms ease;
  }
  
  .search &gt; i {
    line-height: 50px;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="search"&gt;
    &lt;i class="material-icons"&gt;search&lt;/i&gt;
    &lt;form&gt;
      &lt;input type="text" name="search"/&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, it's incomplete. I'm using this library: <a href="http://benalman.com/projects/jquery-outside-events-plugin/" rel="nofollow">http://benalman.com/projects/jquery-outside-events-plugin/</a></p>
  
  <p>and it's not working too well. What I want is for when the search bar expands, the input form thing expands inside of the thing. I also found that the plugin isn't working very well. I need it to return to it's original state when I click anywhere on the page that isn't the search bar itself. Can anybody help me out? I'm a bit confused.</p>