Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
} 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>Talvez isso te ajude:
>
Em 18/03/2017 at 14:58, Eziquiel disse:
Talvez isso te ajude:
http://codepen.io/Eziquiel/pen/dvJzWv?editors=1000
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.
https://github.com/gabrieldarezzo/helpjs-ravi/blob/master/README.md#inline-veja-o-demo
Muito bom seu curso. gostei mesmo, tem mais ? :D
Pesquisando sobre eventos é possível.
Tudo é fácil depois que praticar e estudar ;)
O que já tentou / alterou do script do amigo acima?
>
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).
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](http://codepen.io/Eziquiel/pen/dvJzWv?editors=1000)>
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](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 mesmoDe nada, companheiro.
É um prazer poder ajudá-lo.
>
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](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.Feito, companheiro.
Mudei algumas coisas no CSS também pra melhorar as setas.
Uma animação mais interessante.
>
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.
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.
Mais uma vez muito obrigado. ajudo muito. fixo excelente.
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