Resizing DIV’s with Jquery

Question

Good guys, I have a div of id 'cont', this div 'cont' has 300px height and inside div 'cont' there are 3 other div of same class called 'box' where each div has 100px height, inside each div 'box' has another div of same class, where each after animated gains the height of 100px, here is the code:

<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>

Well, I used the css Hover command to animate the Divs 'box', which when passing the div 'text' grew and so showed its unique content, then came the first impasse, as everyone knows the Hover is activated by passing the mouse over, so thanks to the help of a member of the site here I implemented a JQUERY code, so the animation would come alive whenever the div 'box' was clicked. Now I want to improve this. I would like to animate all div dynamically. My goal is that when clicking on any div 'box' the div 'text' 'grow', however I also want to click on that same div 'box' the div 'text' return to its original size of 0px height, or if you click on another div 'box' the previously grown div 'text' goes back to its original size and the div 'text' for the currently clicked div 'box' grows.

the JQUERY code that I use to animate the box Divs is:

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

Answer 1

You need accordion-like functionality. Then you need to store in a variable (or object as in the example below) which element is open.

Here is an example that closes the other div’s when clicked and opens/closes the one that was clicked in case it is open or not.

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

});

Online example: http://jsfiddle.net/C42Gv/

If you want to use only CSS you can use it like this: http://jsfiddle.net/C42Gv/1/
(the limitation is not to close when you click on it)

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

Answer 2

To change the size of all others .box except the one that was clicked, you can use a combination of $('.box').not(this) with height: auto, for example:

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

Example in Jsfiddle