Conheça mais um dos efeitos incríveis do jQuery.

O jQuery é um framework incrível! Além de você aprender a “mexer” facilmente com ele, ele te dá vários efeitos para personalizar o seu site ou blog. Vamos parar de puxar saco do jQuery e vamos logo dar a entender o que é o toggleSlide e como fazer isto funcionar.

O funcionamento do slideToggle é simples. Ao clicar em algo, ou passar por cima do mouse (dependendo da função que você selecionou no jQuery), ele vai arrastar para baixo uma div ou qualquer outro elemento de sua escolha.

1º Crie um novo documento *.html e importe o jQuery

Para importar o jQuery é simples e nem é preciso fazer o download do mesmo. Basta entrar no site do jQuery e copiar o link do arquivo que eles oferecem para download. No caso é: http://code.jquery.com/jquery-1.7.1.min.js. Agora vamos importar ele para o seu arquivo *.html.

Antes da tag </head> do seu arquivo *.html, coloque isto:

<script src=”http://code.jquery.com/jquery-1.7.1.min.js” type=”text/javascript”></script>

Ficando exatamente assim:

Bom, após isso vamos criar as classes no CSS e as divs responsáveis de identificar o efeito.

Inclua antes do </head> a seguinte linha de CSS:

<style type=”text/css”>
*{margin:0;padding:0;list-style:none;font: 13px Arial, Helvetica, sans-serif)
</style>

Essa linha será responsável por definir a margem, as listas e fonte da página, pelo ao menos as que tiverem sem classe no CSS (e na sociedade).

Agora vamos criar as divs no html. Você pode dar o nome que quiser as suas divs. Ficando mais ou menos assim:

<div class=”faxada”></div>
<div class=”abrir-faxada”><a href=”#” onClick=”return false”>Abrir</a></div>

Ao clicar em Abrir a div faxada vai descer, porém o link deve estar com o onClick=”return false”, porque mesmo com um link morto (‘#’), o efeito no jQuery pode não funcionar.

2º Criar as classes no CSS

Sendo bastante simples, basta criar as classes e especificar o tamanho e cores que quer.

.faxada {width:100%;height:100px;background: #0C3;box-shadow: 0 0 10px #999}
.abrir-faxada {width:100px;padding:5px;background:#999999;border-radius: 0 0 5px 5px;text-align:center}
.abrir-faxada a {color:#FFFFFF;text-decoration:none}
.abrir-faxada a:hover {color:#F1f1f1;text-decoration:none}

O resultado ficou assim:

Mas agora voltamos ao modificar o CSS de novo, pois quando abrirmos a página, a div faxada não deve aparecer. Então volte ao CSS e na adicione display:none nos colchetes da .faxada. Ficando assim:

.faxada {width:100%;height:100px;background: #0C3;box-shadow: 0 0 10px #999;display:none}

3º Inserindo slideToggle()

Agora vem a parte fundamental da coisa, o efeito. Abaixo da linha onde você importou seu jQuery, coloque:

<script type=”text/javascript”>

</script>

O espaço que sobrou entre eles a gente vai inserir as linhas do jQuery. Sendo assim:

$(document).ready(function() {
$(‘.abrir-faxada’).click(function(e) {
$(‘.faxada’).slideToggle(‘slow’)
});
});

Agora salve e teste clicar em Abrir.

Confira o resultado abaixo:

O download do arquivo usado pode ser feito clicando aqui. Outros efeitos também podem ser colocados ao invés do slide, mas por enquanto ficaremos somente com este.

Conseguiu fazer seu slideToggle?

Partilhe sua opinião com a gente nos seus comentários. Sua opinião será muito bem-vinda. Abraço!