jQuery Mostre um div e oculte os outros
Eu tenho o seguinte código
jQuery(document).ready(function() {
jQuery(".toggle").next(".hidden").hide();
jQuery(".toggle").click(function()
{
$('.active').toggleClass('active').next('.hidden').slideToggle(300);
$(this).toggleClass('active').next().slideToggle("fast");
});
});
Tenho vários<div>, e minha ideia é que quando eu abro um<div> alterna outro<div>. E então, quando clico em outro<div>, oculta a abertura<div>. Portanto, apenas um<div> está aberto por vez.
Meu único problema é que, com esse código, quando tento fechar um<div> que já está aberto, fechará e abrirá novamente. Assim, um<div> estará sempre aberto.
Qualquer ajuda será apreciada, obrigado.
Adicionei o HTML e o CSS abaixo. Tudo funciona bem, exceto que não posso obtê-lo para que todos estejam fechados.
Tenho 5 desses empilhados um no outro em um invólucr
* editado para maior clareza *
// HTML
<div class="toggle"></div>
<div class="hidden"></div>
// CSS
.toggle {width:398px; height:48px; cursor: pointer;}
.hidden {width:300px; height:75px; background-color:#333333; margin-left:50px; text-indent:25px;}