Jump to content


Photo

Help Text — Link Para Tornar Texto Visível


  • Faça o login para participar
1 reply to this topic

#1 hvfp

hvfp

    Novato no fórum

  • Usuários
  • 6 posts
  • Sexo:Não informado

Posted 17/06/2009, 18:52

Gostaria de saber se é possível criar um link que, ao ser clicado, torne visível um parágrafo de texto complementar, empurrando o texto do parágrafo seguinte para baixo. Creio já ter visto isso na Ajuda do Windows.

Exemplo:

Aqui teríamos um primeiro parágrafo com link.
E aqui o parágrafo seguinte.

Ao clicarmos no link, teríamos:

Aqui teríamos um parágrafo com link.
Aqui o texto adicional. Reparem que ele entrou na posição do segundo parágrafo, deslocando-o para baixo.
E aqui o parágrafo seguinte.

Uma variação que também já vi é quando, ao clicarmos, o link "cria" texto no mesmo parágrafo, como a seguir:

Aqui teríamos um parágrafo com link. Aqui o novo texto adicional, agora no mesmo parágrafo do link.
E aqui o parágrafo seguinte.

Obrigado,
Henrique

#2 celsoendo

celsoendo

    Novato no fórum

  • Usuários
  • 19 posts
  • Sexo:Não informado

Posted 25/06/2009, 00:11

Exemplo:

Aqui teríamos um primeiro parágrafo com link.
E aqui o parágrafo seguinte.

Ao clicarmos no link, teríamos:

Aqui teríamos um parágrafo com link.
Aqui o texto adicional. Reparem que ele entrou na posição do segundo parágrafo, deslocando-o para baixo.
E aqui o parágrafo seguinte.

Uma variação que também já vi é quando, ao clicarmos, o link "cria" texto no mesmo parágrafo, como a seguir:

Aqui teríamos um parágrafo com link. Aqui o novo texto adicional, agora no mesmo parágrafo do link.
E aqui o parágrafo seguinte.

Obrigado,
Henrique


Existem algumas várias maneiras de fazer isso e tudo depende muito da sua necessidade.

A forma mais fácil é você deixar oculto com css o parágrafo do meio e mudar o valor do atributo css para exibi-lo ao clicar no link:

<p>Aqui teríamos um primeiro parágrafo com <a href="#" onclick="java script:document.getElementById('oculto').display='';">link</a>.</p>
<p id="oculto" style="display:none;">Aqui o texto adicional. Reparem que ele entrou na posição do segundo parágrafo, deslocando-o para baixo.</p>
<p>E aqui o parágrafo seguinte.</p>

Você pode também criar o parágrafo dinamicamente usando DOM (e para isso existem n maneiras). Abaixo um exemplo bem simples:

<script type="text/javascript">
function criaParagrafo()
{
	objP = document.createElement("p");
	objTxt = document.createTextNode("Aqui o texto adicional. Reparem que ele entrou na posição do segundo parágrafo, deslocando-o para baixo.");
	objP.appendChild(objTxt);
	
	objPrimeiroParagrafo = document.getElementById("primeiro");
	objPrimeiroParagrafo.appendChild(objP);
}
</script>
<p id="primeiro">Aqui teríamos um primeiro parágrafo com <a href="#" onclick="java script:criaParagrafo();">link</a>.</p>
<p>E aqui o parágrafo seguinte.</p>

Edição feita por: celsoendo, 25/06/2009, 00:12.





1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq