Jump to content
Shiroma

Texto que aparece e oculta

Recommended Posts

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>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

JQUERY.JS

 

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.

 

 

Share this post


Link to post
Share on other sites

1) Para permanecer o mesmo nome ao clicar no link, ou seja "Topico 1 - Já fez sua oração hoje?" ao ser clicado permanecer "Topico 1 - Já fez sua oração hoje?" 

 

Você precisa deletar do código javascript o que faz essa mudança, vou te mostrar aonde:

$(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')
    });
})

Onde está escrito com // no começo, você pode deletar, ou seja você pode deletar isso =

  Que resolverá esse problema.

 $(this).toggleText('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')

 

2) Os sub-tópicos são HTML, então basta você elimitar no seu código HTML... exemplo

<div class="tgl">
<h2>Conteúdo três</h2> <!-- ELIMINE ESSE TAG <h2>Conteúdo três ou mude para o que quiser.</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>

 

Enfim cara, espero ter ajudado! Abraços e bons estudos!

 

Share this post


Link to post
Share on other sites
Em 05/03/2019 at 03:55, Renan Leite disse:

1) Para permanecer o mesmo nome ao clicar no link, ou seja "Topico 1 - Já fez sua oração hoje?" ao ser clicado permanecer "Topico 1 - Já fez sua oração hoje?" 

 

Você precisa deletar do código javascript o que faz essa mudança, vou te mostrar aonde:


$(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')
    });
})

Onde está escrito com // no começo, você pode deletar, ou seja você pode deletar isso =

  Que resolverá esse problema.


 $(this).toggleText('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')

 

2) Os sub-tópicos são HTML, então basta você elimitar no seu código HTML... exemplo


<div class="tgl">
<h2>Conteúdo três</h2> <!-- ELIMINE ESSE TAG <h2>Conteúdo três ou mude para o que quiser.</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>

 

Enfim cara, espero ter ajudado! Abraços e bons estudos!

 

 

Obrigado Renan, esta parte já está resolvida

só preciso agora a outra que é poder alterar cada Tópico sem perder o efeito que abre e fecha do script.

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

  • Similar Content

    • By odenilson marques
      Ola pessoal,  estou precisando de uma força! segue a situação.
       
      tenho 3 formulário em um projeto, sendo eles:
      form_cad_empresa
      form_cad_atividade
      form_cad_processo
       
      no form_cad_atividade e form_cad_processo tenho uma combobox que lista todas empresas cadastradas no form_cad_empresa, porém no form_cad_atividade e no form_cad_processo também tenho um link que redireciona o usuário para o form_cad_empresa para ele cadastrar a empresa caso não encontre a empresa na combobox do form_cad_atividade e form_cad_processo, porém gostaria que quando terminasse o cadastro do form_cad_empresa este teria que ser redirecionado para o form_cad_atividade ou form_cad_processo, ou seja ele retornaria para formulario que chamou o form_cad_empresa.
       
      Alguém pode me da um norte?
       
    • By eduardaarosaa
      Estou estudando Js, fiz esse exemplo abaixo porém o onlick não está chamando a função, nada acontece quando quando clico no botão.
          
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Somando números</title>
      </head>
      <body>
          <h1>Soamando valores</h1>
          <input type="number" name="txt0" id="txt1">
          +
          <input type="number" name="txt2" id="txt3">
          <input type="button" value="somar" id="botao" onclick="somar()">
          <div id="res">
          </div>
          <script>
          
              res.addEventListener('mouseeenter', entrar);
              function somar(){
                  var n1 = window.document.querySelector("input#txt1");
                  var n2 = window.document.querySelector("input#txt3");
                  var n1 = Number(txt1.value);
                  var n2 = Number(txt3.value);
                  var soma = (n1+n2);
                  var res = window.document.getElementById("res");
          
                  res.innerHTML(`A soma é de ${soma}`);
                 
              }
              function entrar(){
                  area.style.background="red";
              }
          </script>
      </body>
      </html>
           
    • By emersongo
      Olá, no meu projeto tenho uma animação ao scroll, quando me aproximo do elemento ele "surge" de algum lado, porém por alguma razão somente alguns elementos do site estão funcionando 100%, outros, no inspecionar mostra que a classe ANIMATE já é adicionada no elemento assim que a página é carregada, e a mesma não é removida mesmo quando eu me aproximo e afasto do elemento.

      Fazendo alguns testes vi que quando o elemento animado está fora do pai SECTION funciona normalmente, quando está dentro não (com exceção do primeiro elemento animado do site).

      Fiz o upload do código para o JSFiddle, https://jsfiddle.net/kuxf7mep/ ,como pode ver o elemento ARTICLE na linha 101 está animado normalmente, porém os elementos HEADER da linha 147 e o MAIN da linha 152 estão com a animação mas não funcionam.

      OBS: Podem fazer o teste colocando um elemento animado dentro e fora da section.
    • By Mafernardo98
      Tenho uma tabela chamada bilhete, preciso que o usuário, ao clicar no botão que abre um modal, realize uma consulta dentro dessa tabela, essa consulta precisa pegar um id aleatório e exibir o bilhete entro do modal, algo que simule uma caixinha de bilhetes motivacionais, que pode ser retirado um bilhete por vez... Mas eu não consigo exibir os dados da consulta dentro do modal... por favor me ajudem, sou iniciante nisso
       
      Esse é meu index.php
      <?php
                          include_once "db.php";
                          $result_bilhete = "SELECT * FROM bilhete WHERE idbilhete = 4";
                          $resultado_bilhete = mysqli_query($conexao, $result_bilhete);
                          $row_bilhete = mysqli_fetch_assoc($resultado_bilhete);
                          ?>
                         <button type="button" class="btn btn-primary view_data" id="<?php echo $row_bilhete['idbilhete']; ?>"data-toggle="modal" data-target="#visulUsuarioModal">Bilhetes</button>
                          <!-- Modal -->
                          <div class="modal fade" id="visulUsuarioModal" tabindex="-1" role="dialog" arial-labelledby="Rotulo do modal">
                              <div class="modal-dialog" role="document">
                                  <div class="modal-content">
                                      <div class="modal-header">
                                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                          <h4 class="modal-title" id="titulo-modal">Bilhete Motivacional</h4>
                                      </div>
                                      <div class="modal-body">
                                          <span id="p-bilhete"></span>
                                      </div>
                                      <div class="modal-footer">
                                          <button type="button" class="btn btn-primary">Salvar Bilhete</button>
                                      </div>
                                  </div>
                              </div>
                          </div>
              <script>    
                      $(document).ready(function(){
                      $(document).on('click','.view_data', function(){
                          var idbilhete = $(this).attr("idbilhete");
                          //alert(idbilhete);
                          //Verificar se há valor na variável "idbilhete".
                          if(idbilhete !== ''){
                              var dados = {
                                  idbilhete: idbilhete
                              };
                              $.post('vizualizarBilhete.php', dados, function(retorna){
                                  //Carregar o conteúdo para o bilhete
                                  $("#p-bilhete").html(retorna);
                                  $('#visulUsuarioModal').modal('show'); 
                              });
                          }
                      });
                  });
              </script>
      Esse é meu vizualizarBilhete.php
       
      <?php
      if(isset($_POST["idbilhete"])){
          include_once "db.php";
          
          $resultado = '';
          
          $idBilhetes = rand(4, 10);
          
          $result_bilhete = "SELECT * FROM bilhete WHERE idbilhete = 4";
          $resultado_bilhete = mysqli_query($conexao, $result_bilhete);
          $row_bilhete = mysqli_fetch_assoc($resultado_bilhete);
          
          while($row_bilhete = mysqli_fetch_assoc($resultado_bilhete)){
          
          $resultado .= '<dl class="row">';
          
          $resultado .= '<dt class="col-sm-3">Bilhete</dt>';
          $resultado .= '<dd class="col-sm-9">'.$row_bilhete['bilhete'].'</dd>';
              
          $resultado .= '</dl>';
          
          echo $resultado;
          }
      }
       
    • By joaodias117
      Gostaria de saber como realizar a seguinte ação:
      Quero que, ao selecionar um campo de uma lista de categorias, outra lista seja gerada com as subcategorias. Segue exemplo do site Mercado Livre, durante o processo de anúncio de um produto:

      Como eu poderia criar o código javascript e html?
      Esses são os códigos html que uso no documento view:
      <div class="form-group"> <label class="col-sm-3 control-label" for="input-category"><span data-toggle="tooltip" title="<?php echo $help_category; ?>"><?php echo "Categorias"; ?></span></label> <!-- $entry_category --> <div class="col-sm-9"> <select name="product_category" id="product-category" size="10" class="form-control"> <?php foreach($product_categories as $product_category){ ?> <?php if($product_category['parent_id'] == 300 && $product_category['level'] == 0){ ?> <option value="<?php echo $product_category['category_id']; ?>"><?php echo $product_category['name']; ?></option> <?php } ?> <?php } ?> </select> <select name="product_category" id="product-subcategory" size="10" class="form-control"> <?php foreach($product_categories as $product_category){ ?> <?php if($product_category['parent_id'] == 59 && $product_category['level'] == 1){ ?> <option value="<?php echo $product_category['category_id']; ?>"><?php echo $product_category['name']; ?></option> <?php } ?> <?php } ?> </select> </div> </div> Output:

      Obs 1: o código html é um teste para a categoria Acessórios (category_id = 59) gerando as subcategorias dessa categoria (subcategorias com parent_id = 59), mas gostaria de saber como gerar uma lista para cada categoria selecionada.
      Obs 2: no output é gerada a tabela das subcategorias mesmo sem clicar no campo Acessórios, diferentemente do Mercado Livre.
      Alguém poderia me ajudar com isto? Preciso resolver o quanto antes.
      Agradeço desde já a atenção e a ajuda!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.