Okay, so I'm writing a UI for an entertainment suite some friends are making. So far, I've got the following search bar:

(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&&!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;
            });
        }
    });
});

.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 > i {
  line-height: 50px;
  text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

		<link href="+Icons" rel="stylesheet">
<script src=".11.1/jquery.min.js"></script>
<div class="search">
  <i class="material-icons">search</i>
  <form>
    <input type="text" name="search"/>
  </form>
</div>

Okay, so I'm writing a UI for an entertainment suite some friends are making. So far, I've got the following search bar:

(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&&!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;
            });
        }
    });
});

.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 > i {
  line-height: 50px;
  text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

		<link href="https://fonts.googleapis./icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="search">
  <i class="material-icons">search</i>
  <form>
    <input type="text" name="search"/>
  </form>
</div>

As you can see, it's inplete. I'm using this library: http://benalman./projects/jquery-outside-events-plugin/

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.

• javascript
• jquery
• html
• css

1 Answer 1

There is no need to use a external plugin to achieve the click outside functionality, you can implement it yourself.

$(document).ready(function() {
  $(".search").click(function() {
    $(this).addClass("active");
  });
  $(document).click(function(e) {
    if (!$(e.target).closest(".search").length) { //another way to do this is to stop event propagation
      $(".search.active").removeClass('active');
    }
  });
});

.search.active {
  background: rgba(0, 0, 0, 0.4);
  width: 500px;
}
.search.active form {
  display: inline-block;
}
.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 > i {
  line-height: 50px;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

<link href="https://fonts.googleapis./icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="search">
  <i class="material-icons">search</i>
  <form>
    <input type="text" name="search" />
  </form>
</div>