1

Boa Tarde!

Seguinte, tenho uma div.minhaDiv com um height: 580px; e quero que ao clicar em um button o height dessa div.minhaDiv aumente para 1600px.

Quando ela estiver com height: 1600px quero que ao clicar no mesmo button o height volte para 580px;

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

Alguem sabe me dizer onde estou errando? Muito obrigado pessoal, e com certeza é algo muito basico, estou aprendendo javascript, valeu!

3 Respostas 3

1

Seu erro está apenas nesta linha:

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

Em vez de comparar se é menor ou igual, compare se é igual:

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>

Você deve comparar strings se uma é igual ou diferente da outra, e não menor ou maior.

0

Parece-me que deves usar uma classe de CSS com essa altura de 1600px e depois usas .classList.toggle() para automáticamente adicionar e remover essa classe.

Para mudar o texto do botão podes verificar se o elemento tem a classe com altura.classList.contains('aumentada') e aí podes fazer uma condição ternária para dar o texto que deve ter.

Seria algo assim:

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

e o CSS:

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

.aumentada {
    height: 1600px;
}

Exemplo: http://jsfiddle.net/a7rp0q46/

0

Aqui tem uma maneira de fazer isso usando 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>

Aqui ele funcionando: http://jsfiddle.net/ub33vuLg/1/

E esta uma versão mais animada: http://jsfiddle.net/ub33vuLg/2/

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 .