Bom galera, possuo uma div de id 'cont', essa div 'cont' possui altura de 300px e dentro da div 'cont' existe 3 outras div de mesma classe apelidadas de 'box' onde cada div possui altura de 100px, dentro de cada div 'box' possui uma outra div de mesma classe, onde cada uma após se animada ganha a altura de 100px, eis o codigo:
<div id="cont">
<div class="box">
<div class="text">Texto Único 1</div>
</div>
<div class="box">
<div class="text">Texto Único 2</div>
</div>
<div class="box">
<div class="text">Texto Único 3</div>
</div>
</div>
Bom, eu usava o comando css hover pra animar as divs 'box', que ao passar a div 'text' crescia e assim mostrava seu conteúdo único, eis então que surgiu o primeiro impasse, como todos sabem o hover é ativado ao passar o mouse por cima, então graças a ajuda de um membro aqui do site implementei um código JQUERY, assim a animação ganharia vida sempre que a div 'box' fosse clicada. Agora quero melhorar isso. Eu gostaria de animar todas as div dinamicamente. Meu objetivo é que ao clicar em qualquer div 'box' a div 'text' 'cresça', porem eu quero também que ao clicar sobre essa mesma div 'box' a div 'text' retorne ao seu tamanho original de 0px de altura, ou caso se clicar em outra div 'box' a div 'text' que cresceu anteriormente volte ao seu tamanho original e que a div 'text' referente a div 'box' atualmente clicada cresca.
o codigo JQUERY que uso pra animar as divs 'box' é:
$(document).ready(function() {
$('.box', this).click(function(e){
$('.text').css('height', '100px');
});
});