(Resolvido) Ocultar/Exibir textos

rafa Rangel · Agosto 9, 2010

Bom dia a todos. Sou designer, não manjo muito de Janascript, porém caiu um trabalho nas minhas mãos no qual tenho que fazer um site no qual uma das páginas tem vários textos que ficam em janelas separadas somente com um pedaço de texto aparecendo. Em cada janelinha, tem um botão "saiba mais", que quando a pessoa clica o resto do texto aparece logo abaixo.

Layout aqui: http://www.ideaocubo.com/higienizadora_fie...trolePragas.jpg

Eu consegui fazer isso com um texto na página, usando uma função Javascript e CSS entre as tags <head></head>:

<link href="Scripts/hf_css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.tituloBasico {
    font-weight: bold;
}

.hidden { display: none; }

.unhidden { display: block; }
a:link {
    color: #014e60;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #014e60;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
    color: #014e60;
}
</style>
&lt;script type="text/javascript">
function unhide(txt2) {
 var item = document.getElementById('txt2');
 if (item) {
 item.className=(item.className=='hidden')?'unhidden':'hidden';
     }
 }
 </script>

Porém esse código só funciona para uma janela, pois ele está identificando somente uma div, se eu aplicar em mais de uma ele abre todas e esconde todas que estiverem com essa id apontada no script acima.

Como faço pra aplicar em várias janelas de texto??

Ouvi dizer que algusn browsers e sistemas operacionais não reconhecem o css..é verdade??

Enfim..preciso muito de uma luz, pois meu prazo já se esgotou...

Obrigado!

abraço a todos!

Romerito · Agosto 9, 2010

i aew rafa Rangel, bom tenta seguir esse exemplo:

<html>
	<head>
		<title>testes</title>
		<style type="text/css">
			.hidden { display: none; }
			.unhidden { display: block; }
		</style>
		<script type='text/javascript'>

			function visualizaMais()
			{
				var divPai = document.getElementById( 'content' ) ;
				var divA = divPai.getElementsByTagName( 'a' ) ;
				var divContent = null ;

				for ( var i = 0 ; i < divA.length ; i++ )
				{
					divA[i].onclick = function(){
						divContent = this.parentNode.getElementsByTagName( 'div' )[0] ;
						divContent.className = ( divContent.className == 'unhidden' ) ? 'hidden' : 'unhidden' ;
					}
				}
			}

			window.onload = function(){
				visualizaMais() ;
			}

		</script>
	</head>
	<body>

		<div id='content'>
			<div>
				<a href='#'>conteudo 1</a>
				<div class='hidden'>11111111111111111111111</div>
			</div>
			<div>
				<a href='#'>conteudo 2</a>
				<div class='hidden'>22222222222222222222222</div>
			</div>
			<div>
				<a href='#'>conteudo 3</a>
				<div class='hidden'>33333333333333333333333</div>
			</div>
			<div>
				<a href='#'>conteudo 4</a>
				<div class='hidden'>44444444444444444444444</div>
			</div>
			<div>
				<a href='#'>conteudo 5</a>
				<div class='hidden'>55555555555555555555555</div>
			</div>
		</div>
	</body>
</html>

qualquer coisa tenta colocar uma parte do seu código pra gente tentar ajudar, abraço!

Editado Agosto 9, 2010 por Romerito

rafa Rangel · Agosto 9, 2010

Muito obrigado Romerito!!! Salvou minha pele...Tive que pegar esse job agora e não deu nem tempo de estudar mais sobre...

Deus te abençoe!!!rs Obrigado mesmo!!

abração!

Entrar

(Resolvido) Ocultar/Exibir textos

Pergunta

rafa Rangel

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Romerito

Link para o comentário

Compartilhar em outros sites

rafa Rangel

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades