Jump to content
levi.shiroma

Texto que aparece e oculta

Recommended Posts

levi.shiroma

Olá pessoal, tudo bom?

Estou precisando de uma ajuda, baixei um arquivo , página em html e o jquery.js

- No html tem 3 tópicos escritos a mesma coisa : Revelar Conteúdo e quando clica neles a frase muda para Esconder Conteúdo.

- Gostaria de poder alterar cada tópico, exemplo:

- Topico 1 - Já fez sua oração hoje?

- Topico 2 - Está  sentindo um vazio em sua vida?

- Topico 3 - Está feliz?

 

E quando a pessoa clicar no Tópico, em vez da frase mudar para Esconder Conteúdo, quero que permaneça como está: 

- Se está: Já fez sua oração hoje? - continua a mesma sem mudar ( também aquele sub tópico: Conteúdo 1, Conteúdo 2, Conteúdo 3 que aparece quando clica no tópico, gostaria de eliminar, acho desnecessário ele )

 

Minha ideia é fazer vários Tópicos diferentes, uma média de 170.

vou enviar agora os códigos das páginas:

 

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Toggle texto</title>
<style type="text/css" media="all">
#box-toggle {
    width:100%;
    max-width: 500px;
    margin:0 ;
    text-align:justify;
    font:12px/1.4 Arial, Helvetica, sans-serif;
    }
#box-toggle .tgl {margin-bottom:30px;}
#box-toggle span {
    display:block;
    cursor:pointer;
    font-weight:bold;
    font-size:14px;
    color:#336699; 
    margin-top:15px;
    }
</style>
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
jQuery.fn.toggleText = function(a,b) {
return   this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}

$(document).ready(function(){
    $('.tgl').before('<span>Revelar conteúdo</span>');
    $('.tgl').css('display', 'none')
    $('span', '#box-toggle').click(function() {
        $(this).next().slideToggle('slow')
        .siblings('.tgl:visible').slideToggle('fast');
    
        $(this).toggleText('Revelar','Esconder')
        .siblings('span').next('.tgl:visible').prev()
        .toggleText('Revelar','Esconder')
    });
})
</script>
</head>
<body>
<div id="box-toggle">

<div class="tgl">

<h2>Conteúdo um</h2>
<p>Teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste</p>
</div>

<div class="tgl">
<h2>Conteúdo dois</h2>
<p>Conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2</p>
</div>

<div class="tgl">
<h2>Conteúdo três</h2>
<p>jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery</p>
</div>

</div>

</body>
</html>

 

O Jquety.js é do ano de 2007, não coloquei aqui porque tem mais de 3.000 linhas

mas se for necessário posso enviar o arquivo

 

desde já muito grato

fiquem todos com Deus.

Edited by thoga31
GeSHi

Shiroma

Share this post


Link to post
Share on other sites
Zex

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>

<HEAD>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
	<TITLE> Caminho da Luz </TITLE>
</HEAD>


<SCRIPT>


// muda o estado de invisibilidade de uma zona
function toggle(list)
 { 
 var listElementStyle=document.getElementById(list).style; 
 if (listElementStyle.display=="none")
  { 
  listElementStyle.display="block"; 
  }
 else
  { 
  listElementStyle.display="none"; 
  } 
 } 
</SCRIPT>



<BODY BGCOLOR="#EEEEEE">

<H2 ALIGN="CENTER"> Caminho da Luz </H2>

<HR ALIGN="CENTER">

<FONT SIZE="4">Click numa pergunta para mostar/esconder resposta</FONT>

<HR>

<BR><A onclick="javascript:toggle('t1')"> <FONT color=blue><b> 
  Já fizeste a tua oração hoje?  
  </b></FONT> </A>
  <SPAN id="t1" style="display:none">
    Estás salvo!
  </SPAN>

<BR><A onclick="javascript:toggle('t2')"> <FONT color=blue><b> 
  Estás a sentir um vazio na tua vida?  
  </b></FONT> </A>
  <SPAN id="t2" style="display:none">
    Procura Deus que Deus tapa o buraco!
  </SPAN>

<BR><A onclick="javascript:toggle('t3')"> <FONT color=blue><b> 
  Queres ganhar o totoloto e ser rico?
  </b></FONT> </A>
  <SPAN id="t3" style="display:none">
    O dinheiro não compra a felicidade!
  </SPAN>

<BR><A onclick="javascript:toggle('t4')"> <FONT color=blue><b> 
  Por é que Deus deixou eu perder tudo o que tinha?
  </b></FONT> </A>
  <SPAN id="t4" style="display:none">
    Deus quer que procures bens espirituais e não bens materiais!
  </SPAN>

<BR><A onclick="javascript:toggle('t5')"> <FONT color=blue><b> 
  Porque é que Deus deixou ele morrer?
  </b></FONT> </A>
  <SPAN id="t5" style="display:none">
    Deus é justo. Por isso, isso foi bom para quem morreu ou será bom para a evolução de quem ficou cá na Terra.
  </SPAN>

<BR><A onclick="javascript:toggle('t6')"> <FONT color=blue><b> 
  Porque é que o vizinho está sempre a chatear?
  </b></FONT> </A>
  <SPAN id="t6" style="display:none">
    É um teste de Deus para testar o teu amor ao próximo. 
    Preferes que o vizinho te chateie? Ou preferes ser amigo do vizinho?
  </SPAN>

<BR><A onclick="javascript:toggle('t999')"> <FONT color=blue><b> 
  Estás feliz?
  </b></FONT> </A>
  <SPAN id="t999" style="display:none">
    Fica com Deus!
  </SPAN>


<HR>

</BODY>

</HTML>

Esta é a versão HTML.

A versão javascript tem o texto dentro de uma variável array.

A versão utilizador tem o texto num ficheiro de texto.

Edited by Zex

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.