Início
Loja
Olá,
Como o efeito 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.
Observe a marcação HTML que foi desenvolvida para o exemplo que ilustra esta matéria.
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.
Créditos: Maujor
Como o efeito 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.
Observe a marcação HTML que foi desenvolvida para o exemplo que ilustra esta matéria.
- Spoiler:
<div id="box-toggle">
<div class="tgl">
<h2>Conteúdo um</h2>
<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.
- Spoiler:
- <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');
// aqui começa o funcionamento do plugin
$(this).toggleText('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')
});
})
</script>
Créditos: Maujor
