Texto que aparece e oculta

February 28, 2019

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 June 19, 2019 by thoga31
GeSHi

June 15, 2019


<!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 June 16, 2019 by Zex

Sign In

Texto que aparece e oculta

Recommended Posts

levi.shiroma 0

Link to post

Share on other sites

Zex 8

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information