Publicidade

d4v1

Mudar nome do conteúdo esconder conteudo

Patrocínio:

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>

 

0

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

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

 

0

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?

 

0

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).

 

 

0

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

0

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.

0

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.

0

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

3

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mais uma vez muito obrigado. ajudo muito. fixo excelente.

0

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

  • Próximos Eventos

  • Conteúdo Similar

    • Por lucas nc
      Ola, alguem pode me ajudar com um problema? atualmente estva tudo indo bem no meu site, quando de repente eu fui colocar um codigo de publicidade em uma area do meu tema atual, e depois disso as letras e as e os espaços para anuncios não estão se ajustando com a pagina, ta tudo um por cima do outro, na pagina inicial está tudo certo,  mas na pagina do post é que está o problema.
      um ex: eu acabo de fazer uma postagem de um novo video em meu site, ao lado do video tem 3 espaços para ADS abaixo se encontra a descrição do vídeo, só que nada se ajusta em seu determinado lugar, os espaços ads ficam na parte de baixo do video por trás da descrição do video ta uma zona. tonto é que eu até tirei os anuncios na lateral dos video.
       
       
    • Por Tony Junior
      Olá, estou com seguinte problema:
      gostaria de alterar os atributos do select ao clicar em um checkbox usando javascript, exemplo:
       
       <input type="checkbox" name="f" value="titulacao"> Orientadora<br>
       
      <select name="titulacao" >
      <option value="prof >Graduado</option>
        <option value="prof Esp">Especialista</option>
        <option value="prof Me">Mestre</option>
        <option value="prof Dr">Doutor</option>  
      </select>
       
      alterar para
       
      <select>
      <option value="profa >Graduado</option>
        <option value="profa Esp">Especialista</option>
        <option value="profa Ma">Mestre</option>
        <option value="profa Dra">Doutora</option>  
      </select>
       
       
      Desde já grato se alguem puder ajudar.
    • Por Fabricio B. Buckeridge
      Fala galera, estou com uma dúvida em relação a um problema que enfrentei hoje.
       
      Meu problema esta resolvido com a utilização do apostrofe porém queria entender o motivo do problema.
       
      Simulando "bem simples" esse é o erro:
             
      var ateste = 00060467622515; alert('[' + ateste + ']');  
      Porque o valor acima é convertido em [6524183885]
       
      Como mencionei, o problema esta resolvido dentro do meu projeto, mas queria entender o motivo dessa conversão.
       
      Aguardo pra ver se alguém sabe me explicar o motivo do erro.
       
      Abraçosss
    • Por esher
      Olá, pessoal!
       
      Comecei a trabalhar com programação há pouco tempo e sou novo no fórum. Peguei um código que clona um input, porém para remover o input clonado, na primeira vez que clico em remover o botão não faz nada, mas depois do primeiro clique ele funciona normalmente. Como fazer para que o botão remover funcione logo de primeira?
       
      Segue o código:
       
      No <head>:
       
      <script>
          function duplicarCampos() {
              var clone = document.getElementById('origem').cloneNode(true);
              var destino = document.getElementById('destino');
              destino.appendChild(clone);
              var camposClonados = clone.getElementsByTagName('input');
              for (i = 0; i < camposClonados.length; i++) {
                  camposClonados.value = '';
              }
          }
          function removerCampos(id) {
              var node1 = document.getElementById('destino');
              node1.removeChild(node1.childNodes[0]);
          }
      </script>
       
      No <body>:
       
      <form method="post" action="action_obs.php">
          <div class="row">
              <div class="col-md-6">
                  <div id="origem">
                      <input type="text" class="form-control" id="observacao" name="observacao[]" placeholder="Nova observa&ccedil;&atilde;o"><br>
                  </div>
              </div>
          </div>
          <div class="row">
              <div class="col-md-6">
                  <input type="button" class="btn btn-default" value="Adicionar campo" onClick="duplicarCampos();">
                  <input type="button" class="btn btn-default" value="Remover campo" onClick="removerCampos(this);">
                  <input type="hidden" name="id" value="<?php echo $dados[15] ?>">
                  <input type="submit" class="btn btn-success" value="Salvar"><br><br>
              </div>
          </div>
          <div class="row">
              <div class="col-md-6">
                  <div id="destino">
                  </div>
              </div>
          </div>
      </form>
       
      Alguém pode me ajudar com isso? Obrigado.
       
      Rob Niemeyer
    • Por BrunoHSL
      Galera, sou iniciante em programação java/html e preciso da ajuda de vocês, tenho que fazer uma espécie de "orçamento"  na qual criei 3 "input" com, nome do produto, preço e quantidade e preciso passar esses dados que a pessoa digitou para uma tabela, que ficará logo abaixo, ja criei os identificadores, como faço para esses dados ir direto para a tabela ? Tem que ser em Javascript ou HTML, obrigado
       
      Obs: Tabela feita em HTML