Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

SANDROPHP

Expansão e esconder formulario

Por , em Javascript

Recommended Posts

SANDROPHP    0

SANDROPHP
Postado

galerinha preciso d+ fazer isso em um formularo que tera 12 topicos e dentro desses 12 terao os dados a ser preenchidos, so que preciso que todos fiquem escondidos.

Vasculhando a net achei no site da locaweb igual o que preciso fazer.

entrem no endereço: https://contratacao.locaweb.com.br/contratacao/hospedagem.asp?tipo_host=hosting_semi_ii&tipo_pagto=mensal e la pergunta se e cliente ou nao, se voce digitar que nao ele expandi, mais o jeito que quero ta mais abaixo, em serviços adicionais onde expandi e vai selecionando, a parte do formulario e do php nao tenho nenhuma dificuldade, agora como fazer esse tipo de expansão nao faço ideia de como fazer.

 

alquem pode me ajudar????

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

Isso ai é feito com Javascript para poder manipular a propriedade display do CSS

display: block; -> Mostra

display: none; -> esconde

 

Esse é o principio básico da coisa.

eu fiz um exemplo recentemente aqui no fórum:

 

 

<html>
<head>
<script>
function efeito(){
 	//Armazena o ID da div em uma váriavel chamada seudiv
 // seudiv pode ser mudado para um nome a sua escolha
 	var seudiv = document.getElementById('div1');
 	
 	// condição para ele mostrar e esconder de acordo com o estado atual
 if(seudiv.style.display == 'block'){
 	//caso o display do elemento for block ele muda para none
 	seudiv.style.display = 'none';
 	}else{
 	//se não será block
 seudiv.style.display = 'block';
 	}
}
// none = invisivel ; block = visivel
</script>
<style>
#botao{
 width: 100px;
 	height: 20px;
 	color: #fff;
 background: green;
 	border: 2px solid #000;
}
#div1{
 width: 800px;
 	background: #000;
 	color: #fff;
 display: block;
}
</style>
</head>
<body>
</body>

<!-- Botão para disparar o efeito -->
<div id="botao"><a href="#" onclick="javascript: efeito();">Click Aqui</a></div>
<br/><br/>

<!-- Div alvo do efeito -->
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor orci in nunc tristique suscipit. Aliquam semper blandit vestibulum. Nullam lorem dui, 
pulvinar quis convallis at, auctor non lectus. Vivamus in metus felis, a ornare dolor. Maecenas tellus orci, ornare eget condimentum sed, pharetra et ipsum.
Vivamus molestie, justo sit amet pharetra consequat, nisi massa feugiat quam, id mollis leo nunc sed tellus. Suspendisse tempor dui vel ante vestibulum
vehicula. Ut non justo vel massa consectetur tincidunt. Maecenas at pellentesque lacus. 
Maecenas aliquet enim et mauris sollicitudin pulvinar. Aenean rhoncus accumsan neque id rutrum. Aliquam vel tellus sit amet sapien eleifend tincidunt.
Praesent in enim ac mi auctor ullamcorper. Mauris neque sem, facilisis quis volutpat at, viverra a risus. Ut malesuada viverra accumsan. Nunc quis tempor orci.
Phasellus nibh neque, scelerisque a pulvinar sit amet, ultrices sed ante. Donec mattis odio et odio ultrices vel porta magna egestas.
</div>

</html>

 

 

 

Porém com a ajuda do Jquery é possível fazer esse efeito de uma forma mais suave e interessante :)

basta fazer o download da biblioteca Jquery: http://code.jquery.c...ry-1.4.2.min.js

 

e montar seu código da seguinte maneira

 

 

 

<html>
<head>
<!-- Chama a biblioteca jquery -->
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
/* Quando o conteudo for carregado */
$(document).ready(function(){
		/* E clicar na div botão */
 $("#botao").click(function () {
			/* Pega o valor do display do elemento div1 */
	 x = document.getElementById("div1").style.display;
	 /* Se ele for visivel */
	 if( x == "block" ){
			/* Esconde ele de forma lenta - Pode ser mudado para fast - */
			$("#div1").hide("slow");
			/* Senão */
	 }else{
			/* Mostra ele de forma lenta - pode ser mudado para fast - */
			$("#div1").show("slow");
	 }	
 });
});
</script>
<style>
#botao{
 width: 100px;
 	height: 20px;
 	color: #fff;
 background: green;
 	border: 2px solid #000;
}
#div1{
 width: 800px;
 	background: #000;
 	color: #fff;
 display: block;
}
</style>
</head>
<body>
</body>

<!-- Botão para disparar o efeito -->
<div id="botao"><a href="#" onclick="javascript: efeito();">Click Aqui</a></div>
<br/><br/>

<!-- Div alvo do efeito -->
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor orci in nunc tristique suscipit. Aliquam semper blandit vestibulum. Nullam lorem dui, 
pulvinar quis convallis at, auctor non lectus. Vivamus in metus felis, a ornare dolor. Maecenas tellus orci, ornare eget condimentum sed, pharetra et ipsum.
Vivamus molestie, justo sit amet pharetra consequat, nisi massa feugiat quam, id mollis leo nunc sed tellus. Suspendisse tempor dui vel ante vestibulum
vehicula. Ut non justo vel massa consectetur tincidunt. Maecenas at pellentesque lacus. 
Maecenas aliquet enim et mauris sollicitudin pulvinar. Aenean rhoncus accumsan neque id rutrum. Aliquam vel tellus sit amet sapien eleifend tincidunt.
Praesent in enim ac mi auctor ullamcorper. Mauris neque sem, facilisis quis volutpat at, viverra a risus. Ut malesuada viverra accumsan. Nunc quis tempor orci.
Phasellus nibh neque, scelerisque a pulvinar sit amet, ultrices sed ante. Donec mattis odio et odio ultrices vel porta magna egestas.
</div>

</html>

 

 

 

 

Vou mover para área de Javascript pois sua dúvida se encaixa melhor lá ;)

 

Qualquer problema ou dúvida torne a postar

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito