1

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');
  });
});

2 Respostas 2

4

Você precisa de uma funcionalidade tipo accordion. Então precisa de guardar numa variável (ou objeto como no exemplo em baixo) qual o elemento que está aberto.

Aqui fica um exemplo que fecha as outras div's quando clicado e abre/fecha a que foi clicada no caso de ela estar aberta ou não.

function animar(el, h){
    $(el).stop().animate({'height': h}, 500);    
}
$(document).ready(function () {
    var caixasTexto = $('.box .text');
    var textoExpandido = {
        el: null,
        aberto: false
    };
    caixasTexto.on('click', function (e) {
        if (this == textoExpandido.el) textoExpandido.aberto = !textoExpandido.aberto;
        else {
            animar(textoExpandido.el, '20px');
            textoExpandido.aberto = true;
            textoExpandido.el = this;
        }
        animar(textoExpandido.el || this, textoExpandido.aberto? '100px' : '20px');
    });

});

Exemplo online: http://jsfiddle.net/C42Gv/

Se quiser usar somente CSS pode usar assim: http://jsfiddle.net/C42Gv/1/
(a limitação é não fechar quando clica na mesma)

jQuery

$(document).ready(function () {
    var caixasTexto = $('.box .text');
    caixasTexto.on('click', function (e) {
        caixasTexto.css('height', '20px');
        $(this).css('height', '100px');
    });
});

CSS

.text {
    height: 20px;
    transition: height 1s;
}
2

Para alterar o tamanho de todas as outras .box exceto a que foi clicada, pode-se usar uma combinação de $('.box').not(this) com height: auto, por exemplo:

$(document).ready(function() {
  $('.box').click(function(e){
    $('.box').not(this).css('height', 'auto');
    $(this).css('height', '100px');
  });
});

Exemplo no JSFiddle

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .