Jump to content
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>

 

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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

 

Share this post


Link to post
Share on other sites

Pesquisando sobre eventos é possível.

 

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

 

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

 

Share this post


Link to post
Share on other 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).

 

 

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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

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 michael450
      Senhores, boa tarde.
       
      Estou com um probleminha... rss', preciso fazer a listagem de uma função da biblioteca "SPED-NFe"   na qual consulto quais as NFe que emitiram contra meu CNPJ, porém o ele executa toda a função e depois me trás o resultado, eu gostaria de trazer o resultado instantaneamente, como se fosse uma atualização segundo a segundo.
       
       
      Essas informações não são salvas em DB, é apenas para consulta.
      Se alguém puder ajudar serei muito grato,
       
      Abraço.
       
      Michael Douglas
    • By Lincoln Ferreira
      Eu estou tentando fazer um Jquery steps wizard mas não consigo colocar pra ele parar caso não tenha sido preenchido o formulario no segundo passo.
      http://www.jquery-steps.com/Examples
       
      if (newIndex === 2 && $("#Rua").val() == "") { return false; } $(document).ready(function() { $("#wizard").steps({ headerTag: "h2", bodyTag: "section", transitionEffect: "slideLeft", stepsOrientation: "vertical", labels: { current: "current step:", pagination: "Pagination", finish: "Finalizar", next: "Confirmar", previous: "Voltar", loading: "Carregando ..." }, onStepChanging: function(event, currentIndex, newIndex, cepError) { if (currentIndex > newIndex) { return true; } if (newIndex === 1) { return true; } if (newIndex === 2 && $("#Rua").val() == "") { return false; } } } ) }); <div id="wizard"> <h2>Verificação pedido</h2> <section> <h2><strong>Pedido:</strong></h2> <div class="lista-carrinho"></div> </section> <h2>Local de entrega</h2> <section> <div class="informações-usuario"> <form method="get" action="." id="#form-cep"> <div class="form-row"> <div class="form-group col-md-6"> <label for="cep">Cep:</label> <input name="cep" type="text" class="form-control" id="cep" placeholder="09572-660" value="" size="10" maxlength="9" required> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="rua">Rua:</label> <input name="rua" class="form-control" type="text" id="rua" placeholder="Sete de Dezembro" size="60" maxlength="" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="bairro">Bairro:</label> <input name="bairro" class="form-control" type="text" placeholder="Nova Gerty" id="bairro" size="40" maxlength="40" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="n">N°:</label> <input name="n" class="form-control" type="text" placeholder="2" id="n" size="6" maxlength="10" /> </div> </div> <div class="form-group col-md-6"> <label for="complemento">Complemento:</label> <input name="complemento" type="text" class="form-control" id="complemento" placeholder="Ao lado do extra" value="" size="10" maxlength="9" requerid> </div> <div class="form-row"> <div class="form-group col-md-11"> <label for="cidade">Cidade:</label> <input name="cidade" class="form-control" type="text" placeholder="São Bernardo do Carpo" id="cidade" size="40" maxlength="40" /> </div> </div> </div> </form> </div> </section> <h2>Forma de pagamento</h2> <section> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <h2>Informe sua forma de pagamento :</h2> </div> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Dinheiro" name="dinheiro" type="radio" class="radio"> <label for="Dinheiro">Dinheiro</label> </div> </li> </div> <div class="row"> </div> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Cartao" name="cartao" type="radio" class="radio"> <label for="Cartao">Cartão</label> </div> </li> </div> </div> </section> </div>
    • By marcelocardoso
      Fala galera...
      Depois de tanto sofrer tentando e pesquisando na internet, não consegui resolver...
      A nível de conhecimento, segue código para:::

      1) Ao clicar, pegar o id do botão, em seguida abrir com slidetoggle e jogar no TOP tipo ancora.
      2) ou seja, expandir a slidetoggle, mas POSICIONAR no id da DIV, SECTION ou etc...

      CODE:
       
      $(function () { // $("#btn-maps").on("click", function () { // $('html, body').animate({ // scrollTop: $("#maps").slideToggle('slow').offset().top - 135 // }, 1200, 'linear'); // }); $("#btn-maps").click( function (event) { event.preventDefault(); if ($("#maps").is(":visible")) { $("#maps").slideUp(600).offset().top; } else { $("#maps").slideDown(600).offset().bottom; } } ); }); Este código, funciona perfeitamente, adaptado de vários códigos buscados na internet, porém, não consigo com nenhum dos dois, posicionar ao CLICK o SLIDETOGGLE ao expandir deixar examente no inicio do ID;

      Dicas, Sugestões como fazer, realizar, agradeço.
      Obrigado.

       
    • By Guss
      var carro = {
      cor = "azul",
      modelo = "fusca",
      marca = "Volwagen,
      kms = 10000,
      combustivel = "gasolina"
      }
       
    • By _FelipeOlvr
      Oi pessoal, blz?
       
      Bom, passei quase a tarde toda pra fazer o seguinte:
       
      Imagina que o body tem scroll Y.
      agora imagina que no meio do body tem um elemento que tem scroll no sentido X ( <--------> ).
       
      Minha dúvida é a seguinte: Como eu faço pra que, quando eu colocar o mouse em cima desse elemento que sofre scroll no sentido X, o scroll passe a acontecer nele, e não mais no body.
       
      ( Eu sei que se segurar o SHIFT e girar a rodinha do mouse, o scroll acontece somente nele. Mas eu queria tentar isso, pra dar um trabalho a menos pro usuário )
       
      Fiz um layout básico pra simular o layout em que quero fazer isso. Segue:
       
      <!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> JS | Scroll </title> <style> body { min-height: 200vh ; display: flex ; flex-direction: column ; justify-content: center ; } .container-scroll-x { background-color: rgb(219, 237, 240) ; padding: 50px ; } .content { background-color: rgb(127, 189, 207) ; overflow-x: auto ; white-space: nowrap ; padding: 30px ; } </style> </head> <body> <div class="container-scroll-x"> <div class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. </div> </div> </body> </html> Desde já agradeço a ajuda.
       
       
×

Important Information

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