addclass - jQuery add class remove when another is clicked -

having issues returning element start position after next item clicked.

when user hovers on div.box 2 element transition in, when element clicked elements should stay in place. works fine when same item clicked on/off. issue when next item clicked span stays centered within a.blanket.

code: http://jsfiddle.net/mhlwh/3/

html:

<div class="box">     <div class="img"></div>     <a href="" class="blanket">         <span class="arrow"></span>     </a> </div>  <div class="box">     <div class="img"></div>     <a href="" class="blanket">         <span class="arrow"></span>     </a> </div> 

css:

.box {     width:200px;     height:200px;     background:red;     float:left;     margin-left:10px;     margin-top:50px;     position:relative;     /*overflow:hidden*/ } .blanket {     width:100%;     height:100%;     position:absolute;     top:100%;     left:0;     background:blue; } .blanket, .arrow {    -webkit-transition: 0.3s ease-in;  } .arrow {     display:block;     width:100px;     height:100px;     position:relative;     background:black;     top:-300px;     z-index:9999; } .box:hover .blanket {     top:0; } .box:hover .blanket span {     top:53px; } .active {     top:0; } .activearrow {     top:53px; } 

js:

$('.box').find('a').click(function (e) {     e.preventdefault();         var $this = $(this);          if ($this.is('.active')) {             $this.removeclass('active');             $this.find('span').removeclass('activearrow');          } else {             $('a.active').removeclass('active');             $this.addclass('active');             $this.find('span').addclass('activearrow');         } }); 

side note know transition targeting webkit now

i think forgot line:

$('span.activearrow').removeclass('activearrow');