Ir para conteúdo

POWERED BY:

Arquivado

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

Lúcio Gomes

[Resolvido] Expandir conteúdo, mas sumir o texto original e vice-

Por , em Javascript

Recommended Posts

Lúcio Gomes    0

Lúcio Gomes
Postado

Bom, vejam o simples código que eu desenvolvi:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
document.getElementById("text")
function showText(e) {
theObject = document.getElementById("text");
theObject.style.visibility = "visible";
}
function hideText() {
theObject = document.getElementById("text");
theObject.style.visibility = "hidden";
}
</script>
</head>

<body>
Quando expandir, eu pretendo que desapareça este texto e abra simultaneamente o texto oculto.<br>
Este código atual, abre o texto oculto, mas este texto continua.<br>
<a onclick="showText(event);" href="java script://" class="link-cinza">Detalhes</a>

<div id="text" style="visibility:hidden;">
	Conteúdo oculto deve aparecer sozinho na página.<br>
	Mas atulmente está abrindo junto com o texto acima.
	<span><a onclick="hideText();" href="java script://" class="link-cinza">Fechar</a></span>
</div>

</body>
</html>

Nada complexo e cumpre bem sua função. Mas eu queria modificar um detalhe nele, que seria melhor para o site:

 

Ao invés de clicar em expandir e simplesmente abrir o texto oculto, eu queria que sumisse o texto original.

 

Exemplo:

 

Texto original - clique aqui para expandir

(e ao clicar, some a frase acima e aparece o conteúdo oculto)

 

Este é o conteúdo oculto, exibindo apenas ele na página, sem o texto original - clique para fechar

(e ao fechar, some novamente o texto oculto e exibe apenas o texto original, como no início da página)

 

 

Deve ser algo bem simples, mas como estou iniciando no javascript estou com dificuldades nisso.

 

E se possível, como eu faço para mudar a ordem, de abrir inicialmente na página o texto oculto e depois se o usuário quiser encolher, daí ele clica em fechar?

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marhault    1

Marhault
Postado

Dei uma modificada no seu código... Vê se é isso:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function showText() {
document.getElementById("text1").style.visibility = "hidden";
document.getElementById("text2").style.visibility = "visible";
}
function hideText() {
document.getElementById("text1").style.visibility = "visible";
document.getElementById("text2").style.visibility = "hidden";
}
</script>
</head>

<body>
<div id="text1">
Quando expandir, eu pretendo que desapareça este texto e abra simultaneamente o texto oculto.<br>
Este código atual, abre o texto oculto, mas este texto continua.<br>
<a onclick="showText();" href="#" class="link-cinza">Detalhes</a>
</div>
<div id="text2" style="visibility:hidden;">
	Conteúdo oculto deve aparecer sozinho na página.<br>
	Mas atulmente está abrindo junto com o texto acima.
	<span><a onclick="hideText();" href="#" class="link-cinza">Fechar</a></span>
</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lúcio Gomes    0

Lúcio Gomes
Postado

Sim, era isso mesmo. Mas há alguma forma de que quando exibir os detalhes, não aparecer abaixo e sim no lugar do outro texto, pois do jeito que está ele aparece o texto oculto abaixo e fica uma parte branca em cima, e eu queria que ele subisse.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lúcio Gomes    0

Lúcio Gomes
Postado

Existe sim... Tenta com innerHtml...

Bom, eu sinceramente não sei sobre esse innerHtml, até tentei pesquisar mas não consegui o que eu pretendia.

 

O que eu fiz então, foi utilizar uma definição no próprio CSS, pra fazer aparecer os detalhes no mesmo lugar:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

function showText() {

document.getElementById("text1").style.visibility = "hidden";

document.getElementById("text2").style.visibility = "visible";

}

function hideText() {

document.getElementById("text1").style.visibility = "visible";

document.getElementById("text2").style.visibility = "hidden";

}

</script>

<style>

#text2{ position:absolute; top: 10px; }

</style>

</head>

 

<body>

<div id="text1">

Quando expandir, eu pretendo que desapareça este texto e abra simultaneamente o texto oculto.<br>

Este código atual, abre o texto oculto, mas este texto continua.<br>

<a onclick="showText();" href="#" class="link-cinza">Detalhes</a>

</div>

<div id="text2" style="visibility:hidden;">

Conteúdo oculto deve aparecer sozinho na página.<br>

Mas atulmente está abrindo junto com o texto acima.

<span><a onclick="hideText();" href="#" class="link-cinza">Fechar</a></span>

</div>

 

</body>

</html>

E funcionou. Mas daí eu tive outros problemas, pois agora queria saber que definições no CSS eu devo usar pra fazer o conteúdo que vem logo abaixo dessa caixa, subir ou descer de acordo com o "ocultar" ou "expandir".

 

Pois do jeito que está, o conteúdo ou fica parado em baixo e o espaço branco que ficava no topo agora fica abaixo dessa caixa ou o conteúdo aparece em baixo dessa caixa, ou seja, fica uma parte cortada.

 

Ou ainda se puder me explicar uma solução melhor como a do innerHtml, se fizer isso que preciso, de aparecer o conteúdo oculto no mesmo lugar e quando fechar subir o que vier abaixo.

 

Ok?

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
	function showText() {
		document.getElementById("text1").style.display = "none";
		document.getElementById("text2").style.display = "block";
	}
	function hideText() {
		document.getElementById("text1").style.display = "block";
		document.getElementById("text2").style.display = "none";
	}
</script>
</head>
<body>
<div id="text1">
Quando expandir, eu pretendo que desapareça este texto e abra simultaneamente o texto oculto.<br>
Este código atual, abre o texto oculto, mas este texto continua.<br>
<a onclick="showText();" href="#" class="link-cinza">Detalhes</a>
</div>
<div id="text2" style="display:none;">
	Conteúdo oculto deve aparecer sozinho na página.<br>
	Mas atulmente está abrindo junto com o texto acima.
	<span><a onclick="hideText();" href="#" class="link-cinza">Fechar</a></span>
</div>
</body>
</html>

Dá uma lida nesse conteúdo que vai entender o que aconteceu:

Diferença entre display:none e visibility:hidden

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lúcio Gomes    0

Lúcio Gomes
Postado

Ok, muito obrigado Guto. Agora está perfeito mesmo!

Eu não sabia a diferença entre o display:none e visibility:hidden

Agora já aprendi, foi excelente essa dica.

 

Ah e também agradeço a todos que contribuíram para este resultado final aqui neste post.

 

Tenho certeza que isso será útil para muitos.

 

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucky-1    0

Lucky-1
Postado

Olá, tive problemas ao tentar usar esse código várias vezes na mesma página.

Teria alguma solução fácil para isso?

Obrigado.

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