Ir para conteúdo
    • João Batista Neto

      iMasters InterCon 2017   10-10-2017

      Ainda dá tempo de se inscrever no iMasters InterCon 2017, o maior evento dev do Brasil!  
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


  • Próximos Eventos

  • Conteúdo Similar

    • Por Gleyson Abreu
      Bom eu tenho um sistema de postagem onde tem sistema de comentário quando eu comento ta tudo ok, quando retorna os dados tambem, passa os dados certinho como id, text etc.., nele eu tenho um sistema de delete que funciona nos comentários que la já estão, mais quando eu comento algo novo e aperto no X para deletar não funciona, funciona somente quando eu atualizo a página..
      $(document).ready(function(){ $(".deleteComentario").click(function(){ var idComen = $(this).attr('data-id'); $.ajax({ type: 'post', url: 'delete_comentario.php', data: 'idComen='+idComen, cache: false, success: function(data){ $("#comentario_postado"+idComen).remove(); } }); return false; }); }); Como se fosse o sistema do facebook quando você comenta e na mesma hora pode editar e deletar etc.., mais ele só deixa deletar os novos comentários quando eu atualizo a página F5.
    • Por PRWEB
      Boa tarde, tudo bem?
       
      Estou com um probleminha e gostaria muito de ajuda.
      Tenho um filtro que ao digitar a informação ele faz a busca e agora adicionei uma função que verifica que se quando estiver black_list = 1 é direcionado para uma pagina, caso estiver em branco é direcionado para outra pagina.
      Fiz assim, mas não está funcionando:
      function vai_serie(tipo,no_serie,contador,campo,ordem) { var tipo = document.getElementById('tipo').value; var no_serie = document.getElementById('no_serie').value; var contador = document.getElementById('contador').value; if( tipo == "" ){ if (confirm("DIGITE O CÓDIGO DO PRODUTO NO CAMPO TIPO!")) document.getElementById("tipo").value = ""; document.getElementById("tipo").submit(); return true; } if( no_serie == "" ){ if (confirm("DIGITE O Nº SÉRIE NO CAMPO SERIAL!")) document.getElementById("no_serie").value = ""; document.getElementById("no_serie").submit(); return true; } if( contador == "" ){ if (confirm("DIGITE O CONTADOR DO PRODUTO NO CAMPO CONTADOR!")) document.getElementById("contador").value = ""; document.getElementById("contador").submit(); return true; } //Montando a URL a ser enviada if( black_list == "1" ){ var url = "registros_black_list_rma.asp?tipo=" + tipo + "&no_serie=" + no_serie + "&contador=" + contador + "&campo=no_os&ordem=asc"; else var url = "teste.asp?tipo=" + tipo + "&no_serie=" + no_serie + "&contador=" + contador + "&campo=no_os&ordem=asc"; document.getElementById('historico').src = url; //enviando a pagina return false; } Por favor podem me ajudar?
       
      Muito Obrigado
    • Por fabiosc80
      Pessoal preciso de uma ajuda pois travei aqui.
       
      Tenho 3 dropdown com valores iguais (1,2 e 3).
      Tenho que selecionar um valor em um Dropdown e sumir dos outros.
      E quando Seleciono: Selecione um item (valor 0) tem que voltar para os outros dropdowns.
      Fiz assim:
       
      var varField_idFacilitador1 = $("#varField_idFacilitador1 option:selected").val(); if (varField_idFacilitador1 == 0){ $("#varField_idFacilitador1 option[value='1']").show(); $("#varField_idFacilitador2 option[value='1']").show(); $("#varField_idFacilitador3 option[value='1']").show(); } if (varField_idFacilitador1 == 1){ //$("#varField_idFacilitador1 option[value='1']").show(); $("#varField_idFacilitador2 option[value='1']").hide(); $("#varField_idFacilitador3 option[value='1']").hide(); } if(varField_idFacilitador1 == 2){ $("#varField_idFacilitador2 option[value='2']").hide(); $("#varField_idFacilitador3 option[value='2']").hide(); } if(varField_idFacilitador1 == 3){ //$("#varField_idFacilitador1 option[value='3']").show(); $("#varField_idFacilitador2 option[value='3']").hide(); $("#varField_idFacilitador3 option[value='3']").hide(); } var varField_idFacilitador2 = $("#varField_idFacilitador2 option:selected").val(); if (varField_idFacilitador2 == 0 && varField_idFacilitador3 == 0){ $("#varField_idFacilitador1 option[value='2']").show(); $("#varField_idFacilitador2 option[value='2']").show(); $("#varField_idFacilitador3 option[value='2']").show(); } if (varField_idFacilitador2 == 1){ //$("#varField_idFacilitador2 option[value='1']").show(); $("#varField_idFacilitador1 option[value='1']").hide(); $("#varField_idFacilitador3 option[value='1']").hide(); } if(varField_idFacilitador2 == 2){ //$("#varField_idFacilitador2 option[value='2']").show(); $("#varField_idFacilitador1 option[value='2']").hide(); $("#varField_idFacilitador3 option[value='2']").hide(); } if(varField_idFacilitador2 == 3){ //$("#varField_idFacilitador2 option[value='3']").show(); $("#varField_idFacilitador1 option[value='3']").hide(); $("#varField_idFacilitador3 option[value='3']").hide(); } var varField_idFacilitador3 = $("#varField_idFacilitador3 option:selected").val(); if (varField_idFacilitador1 == 0 && varField_idFacilitador2 == 0){ $("#varField_idFacilitador1 option[value='3']").show(); $("#varField_idFacilitador2 option[value='3']").show(); $("#varField_idFacilitador3 option[value='3']").show(); } if (varField_idFacilitador3 == 1){ //$("#varField_idFacilitador3 option[value='1']").show(); $("#varField_idFacilitador1 option[value='1']").hide(); $("#varField_idFacilitador2 option[value='1']").hide(); } if(varField_idFacilitador3 == 2){ //$("#varField_idFacilitador3 option[value='2']").show(); $("#varField_idFacilitador1 option[value='2']").hide(); $("#varField_idFacilitador2 option[value='2']").hide(); } if(varField_idFacilitador3 == 3){ //$("#varField_idFacilitador3 option[value='3']").show(); $("#varField_idFacilitador1 option[value='3']").hide(); $("#varField_idFacilitador2 option[value='3']").hide(); } Porem nao ta rolando certo.
      Volta pra um mas nao volta pra outro.
       
      Não sei mais oque fazer.
       
      Alguem poderia me ajudar?
       
       
       
    • Por matheuslimasr
      Olá pessoal vocês podem ver minha rede social https://codysocial.com/
       
      e mandar dicas e ate criticas isso vai mim ajuda muito para melhorar mais ainda ela,
      vou fica bastante agradecido se vocês testar meu projeto e mim dizer oque achou dela. 
       
      Iniciei este projeto em dezembro de 2016 , e pretendo continuar com ele sempre.
    • Por Eduardo Trindade
      Olá pessoal! Sou novo no fórum e espero estar postando na área correta. Meu problema é o seguinte:
       
      Dado uma consulta SQL que me retorna todos os Alunos cadastrados numa biblioteca, preciso criar o Modal para visualizar os dados mais relevantes de cada aluno, que já está sendo exibido corretamente na tabela. Em seguida farei outro Modal para editar. Acontece que ao chamar o Modal para visualizar as informações do aluno, ele simplesmente não abre. Acredito que tenha identificado onde está o erro, mas ainda não consegui resolver.
       
      A estrutura que permite visualizar a tabela está da seguinte forma:
       
      <?php foreach($alunos as $alunos):?>              <tr class="col-form-label">                             <td><?=$alunos->status?></td>                             <td><?=$alunos->matricula?></td>                             <td><?=$alunos->nome?></td>                             <td><?=$alunos->datanascimento?></td>                             <td><?=$alunos->endereco?></td>                             <td><?=$alunos->telefone?></td>                             <td><?=$alunos->celular?></td>                             <td>                                 <button type="button" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#myModal<?php echo $alunos->id_alunos;?>">Visualizar</button>                                 <button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target="#myModal2<?php echo $alunos->id_alunos;?>">Editar</button>                                 <button type="button" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#myModal3<?php echo $alunos->id_alunos;?>">Apagar</button>                         </td>            </tr>  
      Já a chamada do Modal ficou assim:
       
      <!-- Inicio Modal -->                                 <div class="modal fade" id="myModal<?php echo $rows_alunos['id_alunos']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">                                     <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 text-center" id="myModalLabel"><?php echo $rows_alunos['nome']; ?></h4>                                             </div>                                             <div class="modal-body">                                                 <p><?php echo $rows_alunos['id_alunos']; ?></p>                                                 <p><?php echo $rows_alunos['nome']; ?></p>                                                 <p><?php echo $rows_alunos['matricula']; ?></p>                                             </div>                                             <div class="modal-footer">                                                 <button type="button" class="btn btn-default" data-dismiss="modal">Sair</button>                                            </div>                                         </div>                                     </div>                                 </div> <!-- Fim Modal -->  
      Acontece que, se eu retirar os trechos do PHP <?php echo $alunos->id_alunos;?> após o data-target="myModal no primeiro botão e <?php echo $rows_alunos['id_alunos']; ?>  na primeira linha do início do Modal, ele abre, mas sem funcionalidade, com os erros do modal-body. Porém, do jeito que está, não abre. Não sei onde estou declarando algo errado, e agradeço imensamente quem puder me orientar nesta situação. 
×

Informação importante

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

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: