Ir para conteúdo
d4v1

Mudar nome do conteúdo esconder conteudo

Recommended Posts

Olá, estou precisando de uma ajuda simples, estou com esse código pronto, peguei do www.maujor.com e queria mudar o nome que aparece nos dois campos.

por exemplo:

download 1

(ao clicar acima exibe o download 1)

download 2 suporte

(ao clicar acima exibe o download 2 suporte).

 do jeito que esta, aparece só "revelar conteúdo" e "esconder conteúdo" porque ja esta escrito no js.

segue o código.

e creio que deva ser simples, mas tentei fazer e aparentemente eu teria que adicionar mais código, pela a tentativa que fiz não deu certo. Obrigado desde já.

http://codepen.io/d4v1/pen/GWOzGK

<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:500px;
	margin:0 auto;
	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:#c30; 
	margin-top:15px;
	}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.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>conteudo aqui 11</p>
</div>


<div class="tgl">
<h2>Conteúdo dois</h2>
<p>conteudo aqui 22</p>
</div>

</div>
</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Busca por eventos de Javascript, especificamente onclick/click

 

Js (Sem Libs/FrameWork):

https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/README.md#exercicios-em-javascript

 

Um curso legal explicando a repeito de Listeners/seletores/Node/Child/Parent etc.

http://try.jquery.com/

 

 

 

https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/README.md#inline-veja-o-demo

 

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 18/03/2017 at 14:58, Eziquiel disse:

Fico muito bom, excelente. 

aproveitando aqui,  como faz para que, quando eu clicar fora do do conteúdo alvo, ele recolha? por exemplo, eu cliquei em download 1 ele abriu, dai quando eu clico em outra coisa qual quer, sem ser download 1 e download 2, ele recolha.

tem como fazer isso ? e fácil fazer ?

Obrigado.

Em 18/03/2017 at 12:08, gabrieldarezzo disse:

Busca por eventos de Javascript, especificamente onclick/click

 

Js (Sem Libs/FrameWork):

https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/README.md#exercicios-em-javascript

 

Um curso legal explicando a repeito de Listeners/seletores/Node/Child/Parent etc.

http://try.jquery.com/

 

 

 

https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/README.md#inline-veja-o-demo

 

Muito bom seu curso. gostei mesmo, tem mais ? :D

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pesquisando sobre eventos é possível.

 

Tudo é fácil depois que praticar e estudar ;)

 

O que já tentou / alterou do script do amigo acima?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
7 minutos atrás, gabrieldarezzo disse:

Pesquisando sobre eventos é possível.

 

Tudo é fácil depois que praticar e estudar ;)

 

O que já tentou / alterou do script do amigo acima?

 

tentei fazer com que o conteúdo download recolha ao clicar fora do conteúdo alvo,  mas fiz muita bagunça com onclick.

coloquei direito na minha página. to tentando ainda.

to meio confuso ainda, Jquery, JS, JSON, parece que tem o mesmo código, na minha página mesmo tem Jquery, JS. ta tudo funcionando perfeitamente, mas não sei qual eu uso pra fazer isso, (recolher ao clicar fora do elemento download).

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
7 minutos atrás, Eziquiel disse:

Aqui está, companheiro. Veja o exemplo funcionando.

 

Apenas acrescentei essa função:


$(document).click(function(e){
  if (e.target.closest('.menu') == null){
    $('.menu ul li div').hide();
    $('.menu ul li').removeClass('active')
  }  
});  

Live Demo:

http://codepen.io/Eziquiel/pen/dvJzWv?editors=1000

Impressionante, fico ate emocionado vendo funcionar. kkk

eu tava tentando de maneira totalmente diferente.

Você acrescento muita coisa. (em minha opinião de iniciante )

Obrigado. ajudo muito.

Valeu mesmo

Compartilhar este post


Link para o post
Compartilhar em outros sites
3 horas atrás, Eziquiel disse:

Aqui está, companheiro. Veja o exemplo funcionando.

 

Apenas acrescentei essa função:


$(document).click(function(e){
  if (e.target.closest('.menu') == null){
    $('.menu ul li div').hide();
    $('.menu ul li').removeClass('active')
  }  
});  

Live Demo:

http://codepen.io/Eziquiel/pen/dvJzWv?editors=1000

pra o recolher download 1 ao clicar no download 2 e vise e versa, como faço ?  tentei aproveitar o meu anterior, mas parece que nada se aproveita.

tentei usar os mesmo argumento "revelar esconder" mas não deu certo. Pode me ajudar? Muito agradecido pela super ajuda.

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 minutos atrás, Eziquiel disse:

Uma animação mais interessante.

 

http://codepen.io/Eziquiel/pen/WpMKER?editors=0100

uau. encantado. Muito obrigado.

fico fascinado por essas animações, estou muito querendo fazer uns efeitos fade ao entrar na pagina sabe, sei que js e perfeito para isso, indica algum site de aulas  gratuita ? estou querendo muito fazer esses efeitos, acho muito "massa"


Obrigado pela ajuda. Muito obrigado mesmo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá. Fiz uma correção no código, pois o menu não abria quando clicava no marcador animado ("+" ou"-").

Acrescentei mais um efeito tipo elástico na animação.

 

O que eu faço pra aprender é pegar algo e tentar reproduzir. Eu estudo bem o código e procuro reproduzir pra entender cada passo. Eu não conheço sites de aulas gratuitas, mas creio que deve haver sim.

 

http://codepen.io/Eziquiel/pen/WpMKER?editors=1000

  • +1 3

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por AbaClar
      function buscar(palabra)
      {
          var page = "php/pesquisa.php"; //página com código php para efectuar a busca
             $.ajax ({
              type: 'POST',
              dataType: 'html',
              url: page,
              data: {palabra: txbusca},
          });
      }
      $("#btbusca").click(function() { //botão de busca
          buscar ($("txbusca").val())   // texto de busca
              return false;
      });
       
      Este código juntamente com "pesquisa.php"  faz a busca numa tabela mysql, não sei se estará totalmente correcta pois fiz algumas alterações, mas cumpre com o estabelecido! (no action do form mostra que funciona) O ficheiro "pesquisa.php", pretende fazer busca em 3 tabelas (div psqCliente, div psqAgregado, div psqProcesso) e pretendo mostrar os resultados nos respectivos "tab's" (tabCliente, tabAgregado, tabProcesso)
      Será que posso obter ajuda, obrigado
    • Por Claudia França
      Prezados preciso terminar um projeto do Visa checkout e, estou com dificuldades no fim dele. Peguei no meio do caminho e como programo a pouco tempo gostaria que me ajudassem. 
      Ao escolher um valor para um transação, eu preciso enviar para o email da empresa e do cliente, as inconformações com dados da transação como valor etc.  Fiz o codico abaixo para empresa receber o valor, mas não funcionou. 
      <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Documento sem título</title>
      </head>
      <body>
          <pre>
              
          <?php
      function pegaValor($valor) {
          return isset($_POST[$valor]) ? $_POST[$valor] : '';
      }
      function validaEmail($email) {
          return filter_var($email, FILTER_VALIDATE_EMAIL);
      }
      function enviaEmail($de, $assunto, $mensagem, $para, $email_servidor) {
          $headers = "From: $email_servidor\r\n" .
                     "Reply-To: $de\r\n" .
                     "X-Mailer: PHP/" . phpversion() . "\r\n";
          $headers .= "MIME-Version: 1.0\r\n";
          $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
       
        mail($para, $assunto, nl2br($mensagem), $headers);
      }
      $email_servidor = "cjfranca2004@gmail.com";
      $para = "cjfranca2004@gmail.com";
      $de = pegaValor("valor");
      $mensagem = pegaValor("real");
      $mensagem=pegaValor("dolar");
      $name="valor";
      print_r($mensagem);
      print_r($para);
      print_r($valor);
      print_r($mensagem);
      ?>
      </pre>
      </body>
          
      </html>
       
      Não deu certo.  E por fim ainda mostra essa mensagem de erro, ao finalizar a transação.
       
       
      Desde já agradeço todo esforço em me ajudarem.
       
       
       
       

    • Por Dr. Programador
      Boa noite, pessoal!
       
      Estou batendo cabeça com a seguinte situação:
       
      Ao digitar no imput text, o texto aparece em tempo real na tela (funciona perfeitamente).
      Ocorre que, quando eu aciono a ação do form, o texto desaparece da tela.
       
      Gostaria que, ao ser acionado a ação do form, o texto que foi digitado no imput text, permaneça na tela. Tentei usar session no javascript mas não obtive sucesso.
       
       
      Vejam o código abaixo:
      Mostra aqui em tempo real: <span id="digitar"></span> <form action="adicionar.php" method="post"> <input name="email" id="email" value="" type="text" onkeyup="myFunction()"> <input name="submit" type="submit" value="Adicionar E-mail"> </form>     <script language="javascript">     function myFunction()     {         var x = document.getElementById("email").value;         document.getElementById("digitar").innerHTML = x;     }     </script>   
    • Por fcastro143
      Boas pessoal tou aqui com um problema
      Quero fazer uma página simples com um formulário onde a pessoa preencha o formulário e quando carrega em enviar ele tem que executar uma função que basicamente é abrir um link mas quero que esse link no fim tenha os dados introduzidos no formulário.

      Imaginem que a pessoa no formulário escreve: 
      Na primeira caixa - Olá 
      Na segunda caixa - tudo bem 

      Eu queria que ela ao clicar em enviar isso abra um link que normal é por exemplo :
      https://api.telegram.org/bot353417269:AAE83uouL6joVytjTCz_4_w3QS3xV4VTOJQ/sendMessage?
      chat_id=@itgrouptest&text= 

      E no fim desse link depois do = insira o que foi introduzido nas caixas de texto uma em cada linha. 

      Acho que me fiz entender ..

      Agradeço a quem perceber e ajudar .. tenho alguma urgência pessoal 
    • Por thia6o
      Olá.
      Sou novo no forum, gostaria de saber como faço para fazer um upload de imagem com preview e manipulação do mesmo.
      Ex: escolho algumas imagens visualizo, e se selecionei alguma erra eu removo e mando fazer o upload.
      Tenho um código que remover a imagem mais quando faço upload ela ainda e mandada.
       
       
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Documento sem título</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <style>
      .container-min-foto{
          height: 200px;
          margin: 15px;
          float: left;
      }
      .miniatura{
          height: 160px;
        }
      .removerImg{
          text-align: center;
          color: #FFFFFF;
          background-color: #4900FF;
          display: inline-block;
          cursor: pointer;
          padding: 5px;
      }
      </style>
      </head>
          
      <body>
      <p><button id="rf">Recaregar</button></p>
          <form method="post" enctype="multipart/form-data">
              <input id="files" name="files[]" type="file" multiple>
              <p><button type="submit">Envuiar</button></p>
          </form>
      <div id="preview"></div>
      <script>
      $(function(){
       if (window.File && window.FileList && window.FileReader) {
           $("#files").change(function(evt) {
              var files = evt.target.files,
                  filesLength = files.length;
          for (var i = 0; i < filesLength; i++) {
                  var f = files
              if (!!f.type.match('image.*')) {
                  var fileReader = new FileReader();
                  fileReader.onload = (function(theFile) {
                      return function(e) {                    
                          $("<span class=\"container-min-foto bord-rad-minFoto\">" +
                            "<img class=\"miniatura bord-rad-minFoto\" src=\"" + e.target.result + "\" title=\"" + theFile.name + "\"/>" +
                            "<br/><span class=\"removerImg\">Remover</span>" +
                            "</span>").insertBefore("#preview");
                              // REMOVER IMAGEM PRE VIEW
                          $(".removerImg").click(function(){
                              $(this).parent(".container-min-foto").remove();             
                          });
                      };
                  })(f);
              fileReader.readAsDataURL(f);
              }else{
                  alert("Você selecionou um arquivo que nao é uma imagem")
              }
          }});
        } else {
            alert("Seu navegador não suporta a API de arquivos")
        }
      });
      </script>
      </body>
      </html>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.