Resizing DIVs with Jquery

Question

Resizing DIVs with Jquery

Navigation

#1 by (4 votes)
#2 by (2 votes)

1

Well, I have a 'cont' id div, this 'cont' div has a height of 300px, and within the 'cont' div there are 3 other divs of the same class called 'box' where each div has a height of 100px , inside each div 'box' has another div of the same class, where each one after being 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 the first impasse arose, as everyone knows the hover is activated by hovering the mouse, then thanks to the help of a member of the site I implemented a JQUERY code, so the animation would come alive whenever the 'box' div was clicked. Now I want to improve this. I'd like to animate all div dynamically. My goal is that when I click on any div 'box' the div 'text' 'grow', however I also want that when clicking on that same div 'box' the div 'text' returns to its original size of 0px height, or if you click on another div 'box' the div 'text' that has grown previously will return to its original size and the div 'text' for the currently clicked 'div' box will grow.

The JQUERY code I use to animate the divs 'box' is:

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

jquery css

asked by anonymous 02.06.2014 / 03:43

2 answers

2

To change the size of all other .box except that 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');
  });
});

JSFiddle Example

02.06.2014 / 06:22

How does it work and what is the syntax of the machine code? [closed] Syntax error php [closed]

score 4 · Accepted Answer

You need accordion-like functionality. Then you need to save 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 when it 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');
    });

});

Example online: link

If you want to use only CSS you can use this: link
(the limitation is not closing 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;
}