javascript - Click event hitbox functionality -

i'm trying make search box fixed right , slides out left when clicking on it. far good, when want slide right don't achieve want. slides when click outside of searchbox. want slide right when i'm clicking on '#spawn_search"-element.

i'm kind of stuck on problem. , opinions welome

live example: http://jsfiddle.net/gn9zy/

<div class="search_box closed" id="search_box">     <form action="#" method="post">         <input type="text" name="value" />         <div id="spawn_search"></div>     </form> </div>   .search_box {     background: #f9f9f9;     position: fixed;     right: -214px;     top: 25%;     z-index: 9999;     input[type="text"] {         width: 207px;         float: right;         color: #124136;     }     #spawn_search {         cursor: pointer;         float: right;         height: 50px;         background: #144136;         width: 50px;     } }  $(function () {     var $parent = $('.search_box');     $(document).on('click', function(e) {         if (e.target.id == "search_box" || $(e.target).parents("#search_box").size()) {             if ($parent.hasclass('closed')) {                 $parent.css('right', '0px');                 $parent.removeclass('closed');                 $parent.addclass('open');             }         } else {             if ($parent.hasclass('open')) {                 $parent.css('right', '-214px');                 $parent.removeclass('open');                 $parent.addclass('closed');             }         }     }); }); 

try

$(function () {     var $parent = $('.search_box'), $input = $parent.find('input');      function open(){         $parent.css('right', '0px');         $parent.removeclass('closed');         $parent.addclass('open');     }      function close(){         $parent.css('right', '-214px');         $parent.removeclass('open');         $parent.addclass('closed');     }      $(document).on('click', function(e) {         var $target = $(e.target);          if($target.closest($parent).length){             if($target.is('#spawn_search')){                 if($parent.hasclass('open')) {                     close();                 } else {                     open();                 }             }         } else if($parent.hasclass('open')) {             close();         }      }); }); 

http://jsfiddle.net/arunpjohny/hdalb/