Ir para conteúdo
Fórum CódigoFonte.net
  • Anúncios

    • codigofonte

      Novo Fórum

      Pessoal, Atualizamos nossa versão do fórum para a mais recente da Invision Power. Como tínhamos uma versão muito antiga, talvez algumas áreas possam funcionar de forma errada ou com problemas, gostaria de pedir-lhes a compreensão, pois iremos resolvendo aos poucos. Até mais!
itamarsilvacc

Botão que alterna a exibição de dois coteúdos

Recommended Posts

Boa noite galera, alguém poderia me explicar como faço um botão como o deste site ( http://www.paieterno.com.br/site/oracao/velas-da-fe/) que quando é clicado, esconde as velas que estão acesas, ou seja, o bloco de conteúdo onde elas estão, e exibe um bloco de conteúdo com um formulário para acender uma vela, e troca o seu texto de Acender Vela para Exibir vela, se no estado Exibir Velas o botão for clicado, o bloco com o formulário é escondido novamente e o bloco com as velas exibido. Grato...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aqui vai um código bem simples que se comporta desta forma:

<meta charset=utf-8/>

<button id="botao" onclick="mostrarEsconder()">Mostrar Bloco2</button>

<style>
#bloco1, #bloco2{
	width: 400px;
	border: solid 3px blue;
	padding: 40px 20px;
}
</style>

<div id="bloco1">Bloco 1</div>
<div id="bloco2" style="display: none;">Bloco 2</div>


<script>

var bloco1 = document.getElementById("bloco1");
var bloco2 = document.getElementById("bloco2");
var botao = document.getElementById("botao");

var blocoAtivo = bloco1;

var mostrarEsconder = function(){
	if( blocoAtivo == bloco1 ){ //esconder bloco1 e mostrar bloco2
		bloco1.style.display = "none";
		bloco2.style.display = "block";
		blocoAtivo = bloco2;
		
		// mudar texto do botão
		botao.innerHTML = "Mostrar Bloco1";
	}
	else{//senão...		esconder bloco2 e mostrar bloco1
		bloco2.style.display = "none";
		bloco1.style.display = "block";
		blocoAtivo = bloco1;
		
		// mudar texto do botão
		botao.innerHTML = "Mostrar Bloco2";
	}
}

</script>

Observação: A primeira linha define a codificação a ser usada nos caracteres, para que apareçam as letras acentuadas e o cedilha, além de outras.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×