Mostrar ocultar conteudos com jquery toogle

Mostrar ocultar conteudos com jquery toogle

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”]<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(‘ (<a href="#" class="toggleLink">’+showText+'</a>)’);

// 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>
<p>Conteudo 1</p>
<div class="toggle" style="display: none;">

<p>Aqui pode ter qualquer conteúdo</p>

<p>Incluindo listas usando &lt;ul&gt; &lt;li&gt;</p>

</div>

<p>Conteúdo 2</p>
<div id="2009" class="toggle" style="display: none;">

<p>Aqui pode ter outro conteúdo</p>

<p>Linha 2</p>

<p>Linha 3</p>

</div>
[/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

21 thoughts on “Mostrar ocultar conteudos com jquery toogle

  1. Pingback: Mostrar ocultar conteudos com jquery toogle « new console nintendo

  2. Pingback: dock box for sale canada

  3. Pingback: bodycon dresses usa

  4. Pingback: Boca Raton liberty CPA supplies

  5. Pingback: facial plastic surgeon delray beach

  6. Pingback: daftar org forms

  7. Pingback: facial Plastic Surgery va

  8. Pingback: dock window planter box brackets

  9. Pingback: varicose vein removal scottsdale

  10. Pingback: plastic surgery zimbabwe

  11. Pingback: cajon pass accident video

  12. Pingback: Fort Lauderdale CPA supplies

  13. Pingback: see

  14. Pingback: Boca Raton CPAt testing

  15. Pingback: Kopf Percussion Cajon

  16. Pingback: 1st-art-gallery.com

  17. Pingback: enci.ru

  18. Pingback: visit the Website

  19. Pingback: aruba percussion cajon box drum