Нечетные вопросы, анимационные 2 divs

Question

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

Хорошо, я использую 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> 

Answer 1

Можно сделать такие лучше ...

<button id="btnOne" class="switch" data-target="#one">One</button> 
<button id="btnTwo" class="switch" data-target="#two">Two</button> 
<div id="one" class="toggle"> 
    <p>one text</p> 
</div> 
<div id="two" class="toggle"> 
    <p>two text</p> 
</div> 

затем

.toggle { 
    display: none; 
} 

и

var $toggles = $('.toggle'); 
$('.switch').click(function(){ 
    var $target = $($(this).data('target')).stop(true, true); 
    $toggles.not($target).stop(true, true).slideUp(); 
    $target.slideToggle('slow'); 
}) 

Демо: Fiddle

Answer 2

Использование Jquery Show() и hide()

$("#btnOne").click(function() { 
    $("#two").hide('slow'); 
    $("#one").show('slow'); 

}); 

$("#btnTwo").click(function() { 
    $("#one").hide('slow'); 
    $("#two").show('slow'); 

}); 

DEMO