Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Efeito jQuery toggle para revelar e esconder

Publicado em: 2009-06-22 — 271.639 visualizacoes         

Um dos efeitos mais empregados em desenvolvimento com uso da biblioteca jQuery é aquele que proporciona ao usuário a escolha de revelar e esconder conteúdos.

Neste tutorial vou mostrar os fundamentos da técnica que fazem funcionar este efeito, desenvolvendo um exemplo prático no qual mostrarei como fazer seu script não obstrutivo e um pequeno plugin que se destina a fazer a mudança do texto que o usuário deverá clicar para Revelar ou Esconder o conteúdo.

O efeito revelar/esconder carrega consigo implicitamente as seguintes facilidades

  • é simples e fácil de ser projetado;
  • requer cuidados mínimos para ser “não obstrutivo”;
  • permite inserir muito conteúdo em pouco espaço;
  • facilita a visualização e entendimento dos conteúdos;
  • proporciona interação agradável com o usuário;
  • cria impacto visual interessante.

Desenvolvi um exemplo prático que ilustra as técnicas aqui demonstradas. O exemplo encontra-se em: Revelar e esconder conteúdos com jQuery.

Como funciona?

A estrutura de marcação HTML necessária para o funcionamento do efeito consiste, basicamente, em se marcar um texto curto, uma palavra ou mesmo um símbolo que servirá de “chave”, a ser clicado pelo usuário, para fazer o efeito funcionar, ou seja revelar e esconder o conteúdo. A chave referida é de duas posições tal como são os interruptores de corrente elétrica destinados a acender e apagar luzes.

Os textos curtos que definem as posições da chave normalmente são: “revelar/esconder”, “ver/ocultar”, “abrir/fechar” “mostrar/esconder” ou ainda os símbolos “+/-“, etc.

Em seguida à chave encontra-se a marcação dos conteúdos a revelar/esconder. Estes conteúdos devem ser inseridos com marcação HTML semântica apropriada e, obviamente, variável com o tipo de conteúdo.

Inicialmente é apresentada ao usuário uma página contendo uma lista de chaves na posicão “Revelar” que ao serem clicadas revelarão o conteúdo a seguir e ao mesmo tempo mudarão a chave para a posição “Esconder”. Sempre que o usuário clicar uma chave para revelar e existir um conteúdo que tenha sido revelado anteriormente este deverá ser escondido.

Marcação HTML

Observe a marcação HTML que foi desenvolvida para o exemplo que ilustra esta matéria.

<div id="box-toggle">

<div class="tgl">
   <h2>Conteúdo um</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer...</p>
</div>

<div class="tgl">
   <h2>Conteúdo dois</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer...</p>
</div>

<div class="tgl">
   <h2>Conteúdo três</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer...</p>
</div>

</div>

No exemplo criamos três blocos de conteúdos a revelar/esconder. Os textos das chaves não foram marcados diretamente no HTML. Eles serão criados com JavaScript como veremos a seguir. Fizemos assim para que as chaves não apareçam quando a página for renderizada com JavaScript desabilitado. Outro cuidado que devemos ter é não esconder inicialmente os conteúdos a revelar com uso de folhas de estilo. Se assim fizermos iremos bloquear o acesso aos conteúdos em navegadores com JavaScript desabilitado. Esconda os conteúdos com declaração CSS definida com JavaScript.

Os dois cuidados mencionados acima fazem com que seu script retire da marcação as chaves e não bloqueie acesso aos conteúdos quando JavaScript e/ou CSS estiverem desabilitadas no navegador. E, infelizmente a quase totalidade dos scripts para produzir o efeito revelar/esconder que tenho encontrado na web não levam em conta estas duas considerações. Colocam, equivocadamente, a chave diretamente na marcação e escondem conteúdos com regras CSS em folhas de estilo.

Notar ainda que os conteúdos foram inseridos dentro de um div com a classe tgl e a área que contém os três conteúdos foi inserida dentro de um div geral com id box-toggle.

Script jQuery

<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('Revelar conteúdo');
$('.tgl').css('display', 'none')
$('span', '#box-toggle').click(function() {
$(this).next().slideToggle('slow')
.siblings('.tgl:visible').slideToggle('fast');
// aqui começa o funcionamento do plugin
$(this).toggleText('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')
});
})
</script>

Código comentado

Linha Descrição
2 Sintaxe para criar um método personalizado denominado toggleText que executa uma função admitindo dois parâmetros, a e b. Cria um pequeno plugin.
3 O método criado verifica qual é conteúdo HTML textual de um elemento entre os dois fornecidos nos parâmetros da função e troca um pelo outro. Considere, por exemplo, a=Revelar e b=Esconder para entender o funcionamento da função.
7 Criamos, com script, a marcação HTML para a chave revelar/esconder com o valor inicial revelar e a inserimos antes dos conteúdos a revelar div.tgl.
8 Escondemos os conteúdos a revelar com declaração CSS no script.
9 Atrelamos o evento click às chaves.
10 Clicando a chave a visibilidade do conteúdo imediatamente a seguir é trocada. Se escondida é revelada e vice-versa.
11 Ao mesmo tempo qualquer dos conteúdos vizinhos que estejam revelados serão escondidos.
13 Alterna Revelar com Esconder.
14 e 15 Troca Esconder por Revelar para conteúdos vizinhos que estejam revelados e foram escondidos conforme descrito para a linha 11.

O exemplo que ilustra este tutorial encontra-se em: Revelar e esconder conteúdos com jQuery.

Créditos para o pequeno plugin Autor: Matt Kruse

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

Esta matéria foi publicada em: 2009-06-22 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/06/22/efeito-jquery-toggle-para-revelar-e-esconder/trackback no seu site.

88 comentários na matéria: “Efeito jQuery toggle para revelar e esconder”

  1. NíkolasNo Gravatar disse:

    Muito obrigado era o que eu estava procurando! Parabéns pelo site!

  2. SilvioNo Gravatar disse:

    Para quem esta com dificuldades em trocar o titulo dos conteudos:

    ao invéz de atribuir o span com jquery como em $(‘.tgl’).before(‘Revelar conteúdo’);

    crie os spans no html antes das divs escondidas.

    funciona perfeitamente

  3. Maurício CarrijoNo Gravatar disse:

    Basta apertar Ctrl+U na ´página que mostrao exemplo funcionando, copiar e colar o codigo no notepad++ e salvar no formato .html

  4. PublycydadeNo Gravatar disse:

    Segue alteração do código alterado conforme muitos queriam desta forma o seu funcionamento:

    #box-toggle {
    width:500px;
    margin:0 auto;
    text-align:justify;

    }
    #box-toggle .tgl {margin-bottom:30px;}
    #box-toggle .tg2 {margin-bottom:30px;}
    #box-toggle .tg3 {margin-bottom:30px;}
    #box-toggle .tg4 {margin-bottom:30px;}

    #box-toggle span {
    display:block;
    cursor:pointer;
    font-weight:bold;
    font-size:12px;
    color:#c30;
    margin-top:15px;
    }

    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(’16) Quais as garantias e seguranças em ser um franqueado?’);
    $(‘.tgl’).css(‘display’, ‘none’)

    $(‘.tg2’).before(‘Pergunta 2’);
    $(‘.tg2’).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’)
    });
    })

    resposta da pergunta 1.

    resposta da pergunta 2

    Para ver o script em ação acesse a página: http://www.franquia.delyver.com.br

    Att. Publycydade • http://www.publycydade.com.br

  5. PublycydadeNo Gravatar disse:

    Fantástico este script. Realizei várias alterações a partir deste modelo e ficou como exatamente o cliente exigiu.

  6. Rafael SaugoNo Gravatar disse:

    e se eu quiser fazer sem usar javascript, tem como?

  7. marcosNo Gravatar disse:

    Bom dia pessoal, muito bom o topico, poria me dar uma dica como posso fazer isso só que abrindo laterlmente?
    estilo esse site http://www.totaljobs.com onde tem uma aba na direita escrito Recuiting?
    Puxa não tenho nenhum norte para poder tirar uma referencia a mais perto foi a sua, valeu.

  8. EdsonNo Gravatar disse:

    Eu tentei fazer aqui em casa com o intuito de fazer o btn “Continue Lendo …” ser trocado após o clique para “fechar” mas n deu certo, será q alguém poderia me ajudar? Aqui esta meu script ↓↓↓

    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(”);
    $(‘.tgl’).css(‘display’, ‘none’)
    $(‘input’, ‘#boxe-toggle’).click(function () {

    $(this).next().slideToggle(‘slow’)
    .siblings(‘.tgl:visible’).slideToggle(‘fast’);

    $(this).toggleText(‘Continue Lendo …’, ‘Fechar’)
    .siblings(‘input’).next(‘.tgl:visible’).prev()
    .toggleText(‘Continue Lendo …’, ‘Fechar’)
    });
    })

  9. minha vinhetaNo Gravatar disse:

    Muito bom o tutorial, parabens!!

  10. kleudy silvaNo Gravatar disse:

    vlw pelo tutorial,
    Tem como modificar o titulo:
    revelar conteúdo”
    “revelar conteúdo”
    “revelar conteúdo”
    para

    testo1
    testo 2
    em diante

  11. Fernando SantanaNo Gravatar disse:

    Maujor, ficou bem leve e fácil de implementar no código. Como faria a função quando já clickado uma vez, o conteúdo do outro item continue sendo mostrado?

  12. MarcosNo Gravatar disse:

    Maujor, como colocar ao inves de colocar o span para mostrar o conteudo como posso colocar uma imagem?

  13. WilliamNo Gravatar disse:

    Mais uma vez parabenizo o post. Mas tenho uma dúvida: quero utilizar a função para exibir formulários distintos. P.ex: ao invés de aparecer em todos os conteúdos o mesmo título, como está no exemplo do post:
    “revelar conteúdo”
    “revelar conteúdo”
    “revelar conteúdo”

    Quero colocar “conteúdo1”, “conteúdo2” e assim por diante. Alguém tem ideia?

    valeu!

  14. WilliamNo Gravatar disse:

    O post é show e funcionou legal. Mas quando coloquei o script numa página “https” ele parou de funcionar.

    O que fazer?

  15. Ana PaulaNo Gravatar disse:

    PARABÉNS foi a melhor explicação que eu já vi na net, tetei várias e aqui consegui fazer!!! Muito obrigada

  16. HemiliNo Gravatar disse:

    me ajudou muito…… funcionou direitinho tambem xD

  17. Efeito mostrar e ocultar os comentários do blog com botão | Dicas Pra Seu Blog disse:

    […] de ficar um tempo sem postar, hoje trago uma dica que encontrei no blog do Maujor, onde ele usa um efeito chamado ‘Box Toggle’ para esconder e mostrar objetos.Adaptei o […]

  18. wallaceNo Gravatar disse:

    amigo, como eu faço pra quando clicar no abrir mais o nome sumir ??

  19. FlávioNo Gravatar disse:

    Gostei muito desse tutorial. Mas não estou conseguindo, coloquei no Dreamweaver e quando vou testar os textos ficam abertos mas sem efeito. O que está acontecendo?

  20. ederNo Gravatar disse:

    Eu tb estou com a mesa duvida do alex:
    Bom dia otimo tutorial
    Só que eu gostaria de usar este efeito em uma lista ul li, sendo a mesma abastecida por um banco de dados sql dentro de um loop

    ex.:
    dica 01
    dica 02
    dica 03
    dica …. e assim por diante

    alguém pode ajudar

  21. JoséNo Gravatar disse:

    Bom dia. Como as demais dúvidas, gostaria de saber como trocar o “Revelar conteúdo” e “Esconder Conteúdo” por palavras da minha preferência.

  22. EvandroNo Gravatar disse:

    Amigo, fiz uso do seu tutorial porem surgiu uma duvida:
    tem como criar um titulo diferente pra cada texto. Ex;
    No titulo “o que é lorem ipsun?” quando a pessoa clicar sobre a pergunta, surgir a resposta. Tem como?

  23. WenderNo Gravatar disse:

    Parabéns Maujor. Excelente publicação…

  24. FabianoNo Gravatar disse:

    Muito Bom!!!!… obrigado pela dica, melhor resultado encontrado p/ otimizar conteúdo dentro do html. SHOW!!!!!

  25. trabalhoem cuiabaNo Gravatar disse:

    Olá.. parabens pelo seu blog.. muito bom.. queria aproveitar com relação a esse post, estou procurando algo similar, porém para terem acesso ao conteudo oculto o leitor tem de curtir a pagina do facebook, existe isso para blogger,??

  26. Alex SouzaNo Gravatar disse:

    Bom dia otimo tutorial
    Só que eu gostaria de usar este efeito em uma lista ul li, sendo a mesma abastecida por um banco de dados sql dentro de um loop

    ex.:
    dica 01
    dica 02
    dica 03
    dica …. e assim por diante

    alguém pode ajudar

  27. ToninhoNo Gravatar disse:

    Olá.

    Obrigado. Bom, gostaria de fazer o seguinte:

    O conteudo da TG1 ficar sempre visivel e quando clicar em Mostrar + Cat, mostra o conteudo da TG2 e oculta o TG1.

    Tem como fazer?

    valeu

  28. JenniferNo Gravatar disse:

    Muito bom! Ajudou muito! Pelos outros tutoriais que tentei esse efeito Toggle só funcionava em um “conteúdo” por página, mas esse funcionou em todos direitinho 😀

  29. AlissonNo Gravatar disse:

    Olá, belo script! Obrigado!
    Pode me dar uma dica?

    Gostaria que quando a pessoa clica-se no revelar conteúdo a página não subi-se ao topo. é possível?

  30. LeandroNo Gravatar disse:

    Gostaria de saber se é possível a div aparecer aberta com conteúdo divulgado juntamente com a opção de fechar div.

    obrigado

  31. marinaNo Gravatar disse:

    Oi gente, eu sou leiga no assunto, alguém pode me ajudar a fazer isso no blogger? Fico dando erro na hora de salvar o html, enfim, podem me ajudar?
    Obrigada!

  32. AndréNo Gravatar disse:

    Olá, gostaria de saber se tem como colocar o efeito pra deslizar ao contrário… quando clica pra abrir, ele abre deslizando pra baixo, gostaria de saber se tem como ele abrir deslizando pra cima.

  33. Bruno SerejoNo Gravatar disse:

    Excelente artigo. Só uma curiosidade. Como fazer para que o texto apareça ao lado, não na parte de baixo?

    Parabéns.

  34. EuJogadorNo Gravatar disse:

    Estou com dificuldades em instalar, se me puderem ajudar agrdeço!

  35. MauricioNo Gravatar disse:

    Ele não aceita o + nem o – no lugar de mostrar e esconder pq??

  36. BrunoNo Gravatar disse:

    Simples e funcional.

  37. Evelyn JacovaniNo Gravatar disse:

    Muito bom! Parabens

  38. FelipeNo Gravatar disse:

    Estou com uma dulvida… como eu consigo criar varios toggle dinamicamente com o php mysql?

  39. Sidney Jr. MirandaNo Gravatar disse:

    Parabéns Maujor mto boa postagem!

    eu estava procurando algo parecido e sem querer acabei encontrando!

    Resposta para galera que perguntou como modificar o conteudo que está dentro da que é “Mostra conteúdo”

    O Maujor colocou uma unica classe chamada class=”tg1″, certo!

    Com faço para cada um do mostra conteúdo ser diferente?

    Isso no html:

    class=”tg1″
    class=”tg2″
    e assim por diante.

    No JavaScript:

    $(‘.tgl’).before(‘mostra conteudo 1’);
    $(‘.tgl’).css(‘display’, ‘none’)

    $(‘.tg2’).before(‘ mostra conteudo 2’);
    $(‘.tg2’).css(‘display’, ‘none’)

    Era só ter um pouco de conhecimento em JS.

    Abração e espero te ajudado!

  40. ErikaNo Gravatar disse:

    Mto massa esse efeito! Testei e funciona.
    Porém, assim como o Victor (post 15), ao alterar as chaves revelar/esconder conteúdo por +/-, apenas a posição + (revelar) é mostrada. Ao passo que se eu trocar por “mais” ( como revelar) e “-” (para esconder) funciona e o inverso, não.
    Alguém pode me ajudar?
    Obrigada!

  41. brendaNo Gravatar disse:

    Muito bom, gostei muito das suas explicações,
    mas eu gostaria de saber como faço para substituir o revelar conteudo/esconder conteudo por imagens diferentes em divs tgl , pois tentei mais nao consegui…Obrigado

  42. bruno souzaNo Gravatar disse:

    salvou minha vida 😀

  43. RaphaelNo Gravatar disse:

    Amigo tenho 2 dúvidas:

    1. Como faço para mudar o texto “Revelar Conteúdo” pelo nome do tópico que eu quiser, colocando nomes diferentes para cada tópico clicável que mostra o resto do texto ?

    2. Quando posiciono o mouse sobre o texto “Revelar Conteúdo” ele fica como cursor de texto. Gostaria de saber o que devo mudar no código para que apareça a seta do mouse ou para a mãozinha ?

    Aguardo resposta, obrigado !

  44. RogerioNo Gravatar disse:

    Muito bacana mesmo cara, show de bola, com isso podems as paginas de artigos dos clientes ficam muito mais facil de fazer, nós programadores ganhams muito trempo…..

  45. AndersonNo Gravatar disse:

    Pó fico maneiro! Estava pesquisando sobre isso, mas não sabia muito bem como pesquisar, até que achei seu site. Continuarei navegando em seu site! Vlz!

  46. João Lucas FerrazNo Gravatar disse:

    Caro Mestre Maujor, gostaria que, se possível, pudesse me ajudar com um problema que tive a respeito do Toggle. Fiz algumas modificações, e quando clica nos outros links, eles não fecham como o primeiro. Se puder dar uma olhada, e me ajudar, agradeceria muito. Aki vai o link do site, ainda em construção:

    http://www.franconalimadvogados.com.br/areas.htm

    Abraços,

    João Lucas

  47. Edilson JuniorNo Gravatar disse:

    Bom dia a todos!
    Eu preciso de um help aqui, tenho um efeito desses no site, no menu do usuário, só que eu preciso colocar um uma seta pra baixo indicando que o usuário deve clicar ali e quando essa botão é pressionado a seta deve mudar de posição, pra cima.
    Eu sei que tenho que ter duas imagens e etc.. Só que, onde eu vou colocar as duas imagens??? Preciso disso urgente!
    Agradeço desde já!

  48. Gustavo MarttosNo Gravatar disse:

    O comentário acima não aceitou HTML.

    Mas vou tentar de outro modo:

    Mude <div id="box-toggle"> por <div class="box-toggle">

    E depois faça os ajustes no Script

  49. Gustavo MarttosNo Gravatar disse:

    José Dayam, dá sim, ao invés de usar “id”, use “class”, faça assim:

    Mude para ;
    Em seguida, altere os valores do JavaScript, na linha NOVE,

    altere $(‘span’, ‘#box-toggle’).click(function() {

    por

    $(‘span’, ‘.box-toggle’).click(function() {

    Agora você pode utilizar em vários cantos de seu blog WordPress 😀

    Espero ter ajudado.

  50. EliasNo Gravatar disse:

    Olá, tenho uma dúvida, nesse exemplo, se eu quiser modificar a linha 7 ” $(‘.tgl’).before(‘Revelar conteúdo’); ” p/ que ele não venha com o valor “Revelar conteúdo” e sim o valor de h2 ” Conteúdo um ” e o h2 sendo o link que irá exibir e esconder o contúdo. Como ficaria?

  51. Ricardo Vicentini AugustoNo Gravatar disse:

    Ola. tudo bem? muito legal esse codigo, mais tipo pq no IE8 quando eu clico para ocultar ele dá uma desconfigurada no espaçamento?

    abraços!

  52. WagnerNo Gravatar disse:

    existe algum plugin q faço isso pro wordpress?
    eu n sei programar, queria encontrar um plugin que fizesse isso.
    Bem, desde ja agradeço!

  53. danyNo Gravatar disse:

    ola! como eu faria se eu quisesse exibir tipo as 3 primeiras linhas de um texto, colocar um botao/link “leia mais” e ao clicar a pessoa leria as restantes das linhas do texto?!
    algume teria alguma ideia

  54. LevenyNo Gravatar disse:

    Olá, gostaria de saber como faço para alterar o título onde está escrito

    Revelar conteúdo.

    Exemplo:
    Gostaria que aparecesse.

    contato
    portfólio
    agenda

    assim abriria o conteúdo específico de cada link.

    Desde já obrigado

  55. StrobelNo Gravatar disse:

    Olá, estou com a mesma dúvida da jaimi (2009 – 11 – 17 11:39)

    assim existe, como faço para que ao invés de aparecer
    mostrar conteudo
    mostrar conteudo
    mostrar conteudo

    —– aparecer
    mostrar meus arquivos
    mostrar meus projetos
    mostra meus desenhos

    aguardo

  56. Paulo BalziNo Gravatar disse:

    Galera, dúvida que eu não consegui descobrir como fazer, e nem sei se é possível.

    Mas utilizando a função “toggle”, para esconder e mostrar um conteúdo, é possível eu iniciar uma página com um formulário escondido, eu inicio a função toggle para mostrar esse formulário, ocorre um refresh na página, por exemplo, e gostaria que esse formulário continuasse aberto após a página ser carregada, ou seja, eu queria que fosse matido o estado anterior do form após o refresh da página, tem jeito?

  57. RafaelNo Gravatar disse:

    Sinceramente não acho que deve usar este script. Ele é elegante, mas causa ERROS no site e isso é facilmente percebido por qualquer leigo que usa Internet Explorer. Veja no rodapé desta a síntase – ERRO NA PÁGINA

  58. AndreNo Gravatar disse:

    Consegui resolver com tabelas dinamicas agora so receber os dados em json.
    obrigado

  59. AndreNo Gravatar disse:

    Bom exemplo mas.
    Tenho um problema pra resolver com esse efeito de jquery. Seguinte.
    Eu recebo um objeto json:
    {setores:{setA:[01,07,09],setB:[12,03,14,15],setC:[32,12]}}
    Preciso a partir desse exemplo de json gerar um funçao que crie uma tabela e cada setor será a chave “exibe/oculta”. Crio outra funcao que ira exibir os codigos do setor em linhas.
    ————————
    [+] SetA
    [-] SetB
    12
    03
    ….
    ————————-
    Esse json vem de uma consulta php no mysql e convertido em json para uma variavel objeto no javascript.
    Se eu conseguir resolver eu posto aqui.
    Obrigado

  60. José DayamNo Gravatar disse:

    Porque eu só consigo usar um por página?
    por exemplo, uso o wordpress, e queria usar em todas as postagens esse método, tem como?

  61. NatanaelNo Gravatar disse:

    Muito bom exemplo, sem contar que jquery é quase indispensavel no desenvolvimento agil.

    Esse efeito ai eu uso com frequencia em algumas areas dos sites que faço, bacana.

  62. EstherNo Gravatar disse:

    tentei fazer e não funcionou no firefox 3.5 e nem no ie 8, estou usando o windows 7, outros scripts js funcionam normalmente, o que pode ser?

  63. Michel de WitteNo Gravatar disse:

    Tem como colocar “n” funções, tipo, se eu coloco mais de um na mesma pagina da erro, eu gostaria de expandir para quantas vezes fosse necessario.

  64. jaimi passosNo Gravatar disse:

    :-(( fiquei 100 ação/resposta :-))

  65. DanielNo Gravatar disse:

    Tem como o “conteúdo um” já aparecer aberto?

  66. Louise NzarethNo Gravatar disse:

    Olá, Maujor!

    Muito bom este script, super mão na roda!
    Porém, no IE6 não funcionou… =(
    O que será que está errado?

    Tks!

  67. jaimiNo Gravatar disse:

    ROBERTO, a minha dúvida é a seguinte:
    ———-

    —– assim existe, como faço para que ao invés de aparecer
    mostrar conteudo
    mostrar conteudo
    mostrar conteudo

    —– aparecer
    mostrar meus arquivos
    mostrar meus projetos
    mostra meus desenhos

    agradecido uma vez mais (1*+)
    aguardo

  68. roberto araujoNo Gravatar disse:

    ola jovem !! queria saber como esconder marcador e arquivo ?
    uso a funcao mostrar tudo e a mostrar oculto fonciona +++ nao serve os como link eles egistem + nao aparece exp:.blogspot.com/search/label/cafe

  69. jaimiNo Gravatar disse:

    PARABÊNS, muito bom !!!
    Uma dúvida apenas.
    Como faço para alterar o conteúdo do ?
    por exemplo:
    (mostrar/alterar) meus arquivos
    (mostrar/alterar) meus projetos
    (mostrar/alterar) meus desenhos

    Agradecido e aguardo contato.

  70. João AntonioNo Gravatar disse:

    Olá Sr. Maujor…

    Estou tentando utilizar esse exemplo do blog com shadow box para mostrar e ocultar as divs que contém os Tumbs da galeria…porém quando faço com que o shadow funcione o jquery para de funcionar pode me ajudar?

  71. AlexandreNo Gravatar disse:

    Achei seu blog através do google, procurando por jquery.
    Seu blog é muito bacana e informativo.

    Queria que você me ajudasse numa questão que deve ser
    extremamente simples para você, mas que para mim já custou
    dias de pesquisas e até hoje não encontrei a solução.

    Estou criando esse site:
    http://www.alexandre-oliveira.com/testes/oralgraf/
    e no link “PRODUTOS” gostaria que fosse exatamente
    igual ao link “VEJA TODOS OS 38 DEPARTAMENTOS”,
    do site “AMERICANAS.COM”. Consegui chegar próximo
    com jquery, mas quando eu tiro o mouse de cima do link
    “PRODUTOS” a div some e eu preciso que ela se comporte
    como no site da Americanas. Essa div não pode sumir
    porque terá outros links e informações dentro dela.

    Se você puder me ajudar ou dar alguma ideia eu ficaria
    muito agradecido.

    Obrigado

  72. Rafael BuyNo Gravatar disse:

    Dessa forma o this.html() nulo não aparece.

    jQuery.fn.toggleText = function(a,b) {

    if (this.html() != null) {
    return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function {return(x==a)?b:a;}));

    }
    }

    😉

  73. VictorNo Gravatar disse:

    tem mais um probleminha. No IE. aparece sempre a notificação de erro na página, mais especificamente desta forma
    Detalhes dos erros da página da Web

    Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB5; SIMBAR={8EEDD465-056D-4D32-A58D-DB1F6001233B}; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; InfoPath.2; WWTClient2; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET CLR 3.5.30729; .NET CLR 3.0.30618)
    Carimbo de data/hora: Thu, 17 Sep 2009 20:20:06 UTC

    Mensagem: ‘this.html()’ é nulo ou não é um objeto
    Linha: 26
    Caractere: 1
    Código: 0
    URI: http://www.maujor.com/blog/pg_apoio/jquery-toggle-texto-exemplo.html

    Teria alguma forma de se resolver isto
    abraços

  74. VictorNo Gravatar disse:

    EXELENTE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    Só uma dúvida como altero a palavra ou símbolo que serve para ocultar o texto, pq, quando eu altero alguma destas palavras ou um destes símbolos, só aparece, o de revelar texto, como soluciono?

  75. MaujorNo Gravatar disse:

    @Ricardo
    A sintaxe para uso de live é a seguinte:

    $('span', '#box-toggle').live('click', function() {
    $(this).next().slideToggle('slow')
    ...
    });

  76. RicardoNo Gravatar disse:

    Olá eu gostaria de saber como fazer o toggle com o live poi eu crio uma div com jquery e esta função de toggle em um link no meio da div..

    exemplo, eu crio atraves do jquery o seguinte:

    Usra o Toggle

    ai eu crio uma função jquery q pega o id taltal e quando clicka aparece algo e quando clickar aparece ou esconde algo…

    Ai é que está o problema… se o “Usra o Toggle” ja estiver criado quando carrega a pagina ele funciona só q se for criado depois ele não funciona mais..

    correção: Usar a função live, porem alguem sabe fazer isso pra toggle?

    Abraços

  77. LuisNo Gravatar disse:

    Ola, se eu clicar no botao varias vezes seguidas antes de terminar a animacao ele vai continuar fazendo ate terminar a quantidade de cliques que eu dei, tem como travar o botao ou uma tag “a” ate a animacao completar?
    valeu

  78. William LimaNo Gravatar disse:

    Estou tentando colocar este codigo no meu site estou usando wordpress, faço tudo certo clico em visualizar e funciona mais na hora que publico a pagina ele nao funciona mais, percebi que se colocar o perma link como “default” o codigo funciona mais quando coloco como “day and name”, o codigo passa a nao funcionar, sera que alguem pode me ajudar obrigado!!!!!

  79. EmanueleNo Gravatar disse:

    Baah.. muito show o tutorial!!!

    Testei aqui e funciona as mil maravilhas!! ^^
    Já coloquei no site e tudo mais..

    Muito Obrigada o/

  80. WashingtonFrancaNo Gravatar disse:

    E ae , muito bom estava pesquisando esse evento e no seu tutorial tive a explicação , porém surgiu um dúvida.Estou criando um sistema web, e minha intenção seria no momento eu que eu click no botão, aparece um formulário de cadastro. dentro desse formulário, tb teria abas onde eu clik e aparece e esconde outro formulário de cadastro.
    Seria possivel usar essa tecnica, para tal resultado?
    agradeço e aguardo

  81. Mauro GeorgeNo Gravatar disse:

    @ Diego Marques

    Vi o mesmo problema no firefox 3 e nos IEs 6 e 7.

    A diferença é que nos IEs o “pulo” ocorre proximo ao h2 pois apos clicar em “revelar conteudo” o h2 está colado no texto “revelar conteudo” e depois ocorre o pulo criando a sua margem.

    Já no Firefox o “pulo” ocorre na parte inferior entre o final do paragrafo eo próximo “revelar conteudo”.

    Porém também queria saber como resolver o problema.

  82. SimeoniNo Gravatar disse:

    Ola eu testei tbm e deu um erro:

    Erro: this.html() is null
    Arquivo-fonte: http://www.maujor.com/blog/pg_apoio/jquery-toggle-texto-exemplo.html
    Linha: 26

    ja pesquisei mas nao encontrei nada de como resolver isso, alguem sabe?

    Muito bom o artigo!

  83. Pedro MagalhãesNo Gravatar disse:

    Gostei muito, principalmente por usar jQuery! Continue por favor 🙂

  84. GutoNo Gravatar disse:

    Muito bacana o recurso, já vou utilizá-lo em projetos.

  85. Diego MarquesNo Gravatar disse:

    Muito bom este tutorial, parabens.

    Só um detalhe, na animação de quando abre, no final ele dá um pulo, pelo menos onde eu testei que foi no firefox 3.5 e no chrome.

    Como resolver isto?

  86. Renato TavaresNo Gravatar disse:

    Muito bom mesmo 🙂

  87. Matheus AndradeNo Gravatar disse:

    Show de bola!!!!!

  88. Sérgio RodriguesNo Gravatar disse:

    muito interessante, legal mesmo esta função….tanto que o dream cs3 já vem com códigos jQuery, inclusive esse!

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo