Clicar em botao e alterar altura da div

[GustavoDose 1]

Bom dia,

 

Estou com um problema onde preciso clicar em um botao e a altura do meu conteudo deve aumentar, apenas a altura do conteudo deve aumentar.

 

Tranquilo consegui fazer sem problemas.

 

Mas quando clico no botao denovo o conteudo teria que voltar para a altura normal segue o script que fiz

 

<script>
$( "#botao" ).one( "click", function() {
$( "#conteudo" ).height( 1500 ).css({
cursor: "auto",
});
});
</script>

 

Alguma Dica ? ;/

[Maujor 144]

<script type="text/javascript">

 

$(document).ready(function() {

var alturaInicial = $( "#conteudo" ).height(); //armazena a altura inicial do DIV

$( "#botao" ).on( "click", function() {

var altura = $( "#conteudo" ).height(); // armazena a altura do DIV quando o botão é clicado

if ( altura == alturaInicial ) { // compara as duas alturas e decide se aumenta ou diminui

$( "#conteudo" ).height( 1500 ).css({

cursor: "auto"

});

} else {

$( "#conteudo" ).height(alturaInicial).css({

cursor: "default"

})

}

 

});

})

</script>

 

[carlosmadeiracunha 3]

Sei que este post é antigo mas me serviu, eu fiz uma modificação porque estava abrindo em 1500px o Div conteudo, troquei os 1500 e coloquei auto e agora funcionou perfeitamente.

Ficou assim.

$( "#conteudo" ).height('auto').css({

Quebrei a cabeça pra tentar colocar a animação em slow mas não consegui, tem como fazer isso neste código do Maujor? Acredito que sim, mas como?

Desde já agradeço.

 

[Maujor 144]

@carlosmadeiracunha

Basta usar o método animate() da jQuery para definir as alturas assim:

<script type="text/javascript">
$(document).ready(function() {    
 var alturaInicial = $( "#conteudo" ).height();
 $( "#botao" ).on( "click", function() {
  var altura = $( "#conteudo" ).height();
  if ( altura == alturaInicial ) {
   $( "#conteudo" ).animate( { height:1500 }, 500 ).css({
   cursor: "auto"
   });
  } else {
   $( "#conteudo" ).animate( { height:alturaInicial }, 500 ).css({
   cursor: "default"
   });
  }
  });
})
</script>

[carlosmadeiracunha 3]

Obrigado Maujor, ficou bom ,mas tive que definir uma altura de 300px para o div#conteudo após o click, o height auto não deu certo , eu não sei definir o height como auto dentro da jquery com animate, só do jeito que mostrei acima mas daí perde a animação.

eu fiz um css para o div#conteudo e para o div#botao, ficou assim:

#conteudo{
	border:1px solid #CCC;
	padding:10px;
	height:25px;
	overflow:hidden;
}
#botao{
	background:#880000;
	width:35px;
	color:#FFF;
	text-align:center;
	padding:0px 30px;
	margin:-10px auto 10px;
	position:relative;
	cursor:pointer;
	z-index:2;
}

Eu estou tentando esconder parcialmente o conteúdo do div#conteudo inicialmente e abrir até o tamanho do texto ao clicar no botão por isso preciso do height auto..