Efeito Slide Toggle com JavaScript

o Slide Toggle é um efeito bem legal em JavaScript,acho que muitos de vocês ainda não o conhecem,mas depois que conheceram usarão quase sempre em seus sites,templates,etc...

Primeiro,devemos adicionar nosso JavaScript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> <script type='text/javascript'> $(document).ready(function(){ $('#mascara').css('height', $(document).height()).hide(); $('.interruptor').click(function(e) { e.preventDefault(); $('#mascara').toggle(); if ($('#mascara').is(':hidden')) { $(this).html('Apagar luzes').removeClass('apaga-acende'); } else { $(this).html('Acender luzes').addClass('apaga-acende'); } }); }); </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>Mostrar 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('Mostrar','Esconder') .siblings('span').next('.tgl:visible').prev() .toggleText('Mostrar','Esconder') }); }) </script>

Agora nosso CSS:

#box-toggle span { border:1px dashed #666; color:333; background:333 }

E por fim,nosso HTML,para seu utilizado!

<div id="box-toggle"> <div class="tgl"> Conteúdo/Códigos/Elementos Aqui! </div> </div>