Eu sei que há um monte de tutoriais sobre o efeito alternar lá fora já, mas quando eu estava aprendendo o básico do jQuery eo efeito de alternância, eu tinha muita dificuldade em encontrar recursos sobre como mudar o "aberto" e estado "fechar" gráfico.

Depois de ler alguns tutoriais e misture e técnicas de correspondência eu era capaz de conseguir este efeito, mas queria compartilhá-lo com aqueles que experimentaram a mesma frustração que eu tinha atravessado.

Passo 1. Wireframe & Style

Começamos com uma tag h2 com um link como o "gatilho" para o nosso efeito. Abaixo do nosso h2, teremos nosso recipiente onde temos o conteúdo. Note-se que ninho que o recipiente dentro de outro div. Uma das principais razões que decidi fazer isso foi para evitar o preenchimento de flexibilização para cima e para baixo durante sua ação.

HTML

Toggle Header




Content Header

CSS

h2.trigger {
padding: 0 0 0 50px;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 450px;
font-size: 2em;
font-weight: normal;
float: left; margin-right:15px; margin-right:15px;
}
h2.trigger a {
color: #fff;
text-decoration: none;
display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
}
.toggle_container .block {
padding: 20px; /*--Padding of Container--*/
background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}

Passo 2. Ativando o Alternância com jQuery

jQuery

Vamos agora ativar este efeito alternar com alguns simples jQuery.

$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
});

Conclusão

Eu não sou nenhum mestre jQuery, portanto, pode haver uma maneira ainda mais curto de escrever isto, mas esta faz o truque para mim. Se qualquer jQuery cabeças estão lá fora ainda está lendo, por favor, compartilhar algumas de suas técnicas e dicas!