Change height with javascript

Question

Good Afternoon!

Next, I have a div.minhaDiv with a height: 580px; and I want to click on a button the height of that div.minhaDiv increase to 1600px.

When she is with height: 1600px I want to click on it button the height goes back to 580px;

Follows HTML

<div class="minhaDiv">
...
</div>
<button onclick="verMais();" class="botao">Ver mais</button>

Javascript

var altura = document.querySelector(".minhaDiv");
function verMais(){
    if(altura.style.height <= "580px"){
       altura.style.height = "1600px";
       document.querySelector(".botao").innerHTML = "Ver menos";
    }else{
        altura.style.height = "580px";
        document.querySelector(".botao").innerHTML = "Ver mais";
    }
}

Can anyone tell me where I’m going wrong? Thanks a lot guys, and it sure is something very basic, I’m learning javascript, thanks a lot!

Answer 1

Your mistake is only on this line:

if(altura.style.height <= "580px"){

Instead of comparing if it is equal to or equal to, compare if it is equal:

if(altura.style.height == "580px"){

var altura = document.querySelector(".minhaDiv");
function verMais(){
	  if(altura.style.height == "580px"){
       altura.style.height = "1600px";
       document.querySelector(".botao").innerHTML = "Ver menos";
    }else{
        altura.style.height = "580px";
        document.querySelector(".botao").innerHTML = "Ver mais";
    }
}

<div class="minhaDiv" style="display: block; background: red; height: 580px;">
	teste
</div>
<button onclick="verMais();" class="botao">Ver mais</button>

You should compare strings if one is the same or different from the other, and not smaller or larger.

Answer 2

It seems to me that you should use a CSS class with that height of 1600px and then use .classList.toggle() to automatically add and remove this class.

To change the button text you can check if the widget has the class with altura.classList.contains('aumentada') and then you can make a ternary condition to give the text you must have.

It would be something like that:

var altura = document.querySelector(".minhaDiv");
var button = document.querySelector('button');
button.addEventListener('click', function(){
    altura.classList.toggle('aumentada');
    button.innerHTML = altura.classList.contains('aumentada') ? 'ver menos' : 'ver mais';
});

and the CSS:

.minhaDiv {
    height: 580px;
    transition: height .5s; /* opcional, cria uma animação */
}

.aumentada {
    height: 1600px;
}

Example: http://jsfiddle.net/a7rp0q46/

Answer 3

Here’s a way to do it using jQuery:

$('.botao').on('click', function() {
 var el = $('.minhaDiv');
    if (el.height() != 1600) {
        el.height(1600);
        $(this).text('Ver menos');
    } else {
        el.height(580);
        $(this).text('Ver mais');
    }
 });
<button class="botao">Ver mais</button>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js">
</script>

Here he running: http://jsfiddle.net/ub33vuLg/1/

And this is a more animated version: http://jsfiddle.net/ub33vuLg/2/