Нечетные проблемы, оживляющие 2 деления

первый раз задавая вопрос, но этот сайт ответил на сотни для меня.

Хорошо, я использую jquery для анимации 2 divs от кнопки для каждого. Они работают, но с глюком, который я не могу понять. Оба divs имеют высоту 0 в css. Если я нажму на первую кнопку, откроется первый div. Затем нажмите вторую кнопку, первый div закрывается и второй открывается (по желанию). Но, если я снова нажму вторую кнопку и закрою div, а затем снова нажмите на первый, ничего не произойдет до другого щелчка. Надеюсь, что бормотание имеет смысл. Любая помощь, решающая этот глюк, была бы большой, спасибо

Вот это и есть. http://jsfiddle.net/Jptalon/AMu2Z/1/

<button id="btnOne">One</button>
<button id="btnTwo">Two</button>
<div id="one">
<p>one text</p>
</div>
<div id="two">
<p>two text</p>
</div>
<script>
var stateone = true;
var statetwo = true;
$(function() {
$("#btnOne").click(function(){
  var x = document.getElementById('two');
  if ( x.style.height != 0){ $("#two").animate({height:"0px" }, "slow"); statetwo = !statetwo;}
   if ( stateone ) {
     $("#one").animate({height:"100px" }, "slow");
   } else {
     $("#one").animate({height:"0px" }, "slow");
   }
   stateone = !stateone;
   });
 });
 $(function() {
 $("#btnTwo").click(function(){
   var y = document.getElementById('one');
   if ( y.style.height != 0){ $("#one").animate({height:"0px" }, "slow"); stateone = !stateone;}
   if ( statetwo ) {
     $("#two").animate({height:"100px" }, "slow");
   } else {
     $("#two").animate({height:"0px" }, "slow");
   }
   statetwo = !statetwo;
  });
});
</script>