O jquery entre as suas inúmeras facilidades tem a possibilidade de mostrar ou ocultar um conteúdo de uma div por exemplo. Essa funcionalidade é muito útil para páginas com conteúdo muito grande e que podem ser oculto.
Para fazer um dos métodos é usar a função toogle.
Aqui um exemplo de como irá ficar:
[inline]
[script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"][/script]
[script type="text/javascript"]
//só irá executar o script quando o DOM estiver pronto(quando toda a página estiver carregada)
$(document).ready(function() {
// texto que irá aparecer no link
var showText=’Mostrar’;
var hideText=’Ocultar’;
var visivel = false;
// adiciona esse link ao conteudo
$(‘.toggle’).prev().append(‘ (‘+showText+’)’);
// oculta o conteudo
$(‘.toggle’).hide();
//quando o link for clicado irá executar essa função
$(‘a.toggleLink’).click(function() {
// troca a visibilidade
visivel = !visivel;
// troca o texto do link
$(this).html( (!visivel) ? showText : hideText);
// exibe/oculta o conteúdo
$(this).parent().next(‘.toggle’).toggle(‘slow’);
// troca a linha acima pela de baixo para mudar o efeito
// $(this).parent().next(‘.toggle’).slideToggle(‘fast’);
return false;
});
});
[/script]
[/inline]
Conteudo 1
Conteúdo 2
Aqui segue todo o código para fazer ele funcionar.
[code language="php"]
Conteudo 1
Conteúdo 2
[/code]
Como pode ser visto só é preciso adicionar a class=”toogle” a uma div que ele irá adicionar a funcionalidade.
Obs: caso queira fazer um efeito onde somente um dos itens seja visível de cada vez use a função Accordion do jquery
Para fazer um dos métodos é usar a função toogle.
Aqui um exemplo de como irá ficar:
[inline]
[script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"][/script]
[script type="text/javascript"]
//só irá executar o script quando o DOM estiver pronto(quando toda a página estiver carregada)
$(document).ready(function() {
// texto que irá aparecer no link
var showText=’Mostrar’;
var hideText=’Ocultar’;
var visivel = false;
// adiciona esse link ao conteudo
$(‘.toggle’).prev().append(‘ (‘+showText+’)’);
// oculta o conteudo
$(‘.toggle’).hide();
//quando o link for clicado irá executar essa função
$(‘a.toggleLink’).click(function() {
// troca a visibilidade
visivel = !visivel;
// troca o texto do link
$(this).html( (!visivel) ? showText : hideText);
// exibe/oculta o conteúdo
$(this).parent().next(‘.toggle’).toggle(‘slow’);
// troca a linha acima pela de baixo para mudar o efeito
// $(this).parent().next(‘.toggle’).slideToggle(‘fast’);
return false;
});
});
[/script]
[/inline]
Conteudo 1
Conteúdo 2
Aqui segue todo o código para fazer ele funcionar.
[code language="php"]
Conteudo 1
Conteúdo 2
[/code]
Como pode ser visto só é preciso adicionar a class=”toogle” a uma div que ele irá adicionar a funcionalidade.
Obs: caso queira fazer um efeito onde somente um dos itens seja visível de cada vez use a função Accordion do jquery
0
Postar um comentário