jQuery переключение между двумя элементами и закрытие другого

Question

У меня есть 2 элемента списка, и когда один щелкнут, внутренний div открывается. Но проблема в том, что когда оба щелкнули, они оба остаются открытыми. Я бы хотел, чтобы это было, когда один щелкнул, другой будет закрыт.

JQuery

$('.register, .signin').click(function(e){ 
    e.preventDefault(); 
    var userclass = $(this).attr('class'); 
    $('.'+userclass+'-panel').toggle(); 
}); 

HTML

<ul class="user-status"> 
    <li><a class="register" href="#">Register</a> 
     <div class="register-panel tooltip" style="display: none;"> 
      <form action="" method="post"> 
       <input type="email" name="email" id="email" placeholder="email"><div class="usernamecheck"></div> 
       <input type="password" name="password" id="password" placeholder="password"> 
       <input type="submit" name="register" value="Register" disabled="disabled"><div class="userstatus"></div> 
      </form> 
     </div><!-- /register --> 
    </li> 
    <li><a class="signin" href="#">Sign In</a> 
     <div class="signin-panel tooltip" style="display: none;"> 
      <form action="" method="post"> 
       <input type="email" name="email" placeholder="email"><div class="usernamecheck"></div> 
       <input type="password" name="password" placeholder="password"> 
       <input type="submit" name="signin" value="Sign In"><div class="userstatus"></div> 
      </form> 
     </div><!-- /register --> 
    </li> 
</ul> 

Answer 1

Просто добавьте $('.tooltip').not('.'+userclass+'-panel').hide(); .

$('.register, .signin').click(function (e) { 
    e.preventDefault(); 
    var userclass = $(this).attr('class'); 
    $('.' + userclass + '-panel').toggle(); 
    $('.tooltip').not('.' + userclass + '-panel').hide(); 
}); 

jsFiddle example

Это будет скрыть форму, которая не выбран.