Tenho um jQuery que fiz para abrir e fechar uma div ao clicar na pergunta correspondente. O problema é que somente a primeira div está abrindo\fechando, mesmo eu clicando na 3ª ou 5ª pergunta.
Exemplo: http://jsfiddle.net/1sozc3rL/
jQuery:
var SC = jQuery.noConflict();
SC(document).ready(function() {
SC('.FAQ-conteudo').hide();
SC('.FAQ-fecha').hide();
SC('.FAQ-pergunta').removeClass('FAQ-atual');
SC('.FAQ-pergunta').click(function(){
var i = SC(this).index();
var faqTemClasse = SC('.FAQ-pergunta:eq('+i+')').hasClass('FAQ-atual');
if (faqTemClasse) {
SC('.FAQ-pergunta:eq('+i+')').removeClass('FAQ-atual');
SC('.FAQ-conteudo:eq('+i+')').fadeOut(300);
SC('.FAQ-fecha:eq('+i+')').hide();
SC('.FAQ-abre:eq('+i+')').show();
} else {
SC('.FAQ-conteudo').fadeOut(300);
SC('.FAQ-pergunta:eq('+i+')').addClass('FAQ-atual');
SC('.FAQ-conteudo:eq('+i+')').fadeIn(300);
SC('.FAQ-fecha:eq('+i+')').show();
SC('.FAQ-abre:eq('+i+')').hide();
}
});
});
Edit: Fiz mais uns testes e realmente ele está pegando apenas o index 0, por isso está abrindo\fechando somente a primeira div de conteúdo.
O .index()
não pega a ordem de elementos dentro de todo o arquivo, independendo do lugar?