Ir ao conteúdo
  • Cadastre-se
Ingridss

Código html: botão que só mostra conteúdo

Recommended Posts

Olá, recebi o seguinte código de um botão que mostra e oculta o conteúdo (o formulário). Gostaria de saber se é possível modificar esse código pra ele apenas ter a função de mostrar, porque já tentei fazer isso mas não consegui, ou se for possível, queria um outro código HTML que tenha essa função de mostrar. Segue o código:

<style type="text/css">
.escondida {
    display:none;
}
</style>

<script type="text/javascript">
function abrir() {
    var main = document.getElementById("central");
    var iten = main.getElementsByTagName("input");
    if (iten) {
        for (var i=0;i<iten.length;i++) {
            iten[i].onclick = function() {
                var el = document.getElementById(this.id.substr(7,7));
                if (el.style.display == "block")
                    el.style.display = "none";
                else
                    el.style.display = "block";
            }
        }
    }
}
window.onload=abrir;
</script>

<div id="central">
	<!-- Botao -->
    <input type="button" value="Abrir / fechar" id="receita1">
	<!-- conteudo escondido -->
    <div id="1" class="escondida"> 
		<!-- Aqui fica o seu form -->
					
					<!-- INICIO DO FORMULÁRIO -->
					
					<form id="formulario" method="post" action="enviar.php">
					
						<p>
							Nome:<br>
							<input type="text" name="nome" id="nome_id">
						</p>
						
						<p>
							E-mail:<br>
							<input type="email" name="email" id="email_id">
						</p>
						
						<p>
							Telefone:<br>
							<input type="tel" name="fone" id="fone_id">
						</p>
						
						<p>
							Mensagem:<br>
							<textarea name="msg" cols="35" rows="5"></textarea>
						</p>
						
						<p>
							<input class="botao" type="submit" name="enviar" id="enviar_id" value="Enviar">
						</p>
						
					</form>
						
					<!-- FIM DO FORMULÁRIO -->
	
	
	</div>

</div>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Ingridss No seu último tópico eu expliquei isso para você.

 

Veja o último exemplo. é só substituir a função toggle()  por show().

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@dif obrigada k. Consegui. Sabe se dá pra customizar esse botão também? Tipo se ele pode ter outra cor, a letra ter outra fonte ou ficar um pouco maior...

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Ingridss Sim. você pode estilizar no CSS... SE poder editar um css é claro.

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





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×