Problem with jQuery open/close Divs

Question

I have a jQuery that I made to open and close a div by clicking on the corresponding question. The problem is that only the first div is opening closing, even though I click on the 3rd or 5th question.

Example: 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: I did some more tests and really he’s only getting index 0, so he’s only opening closing the first div of content.

The .index() does not take the order of elements within the entire file, regardless of the place?

Answer 1

In this case, since you have multiple questions with equal markup only by changing the content, I recommend using the selector context instead of using the index.

The pattern that repeats for each question is:

<div class="FAQ-box cf">
    <a class="fx left FAQ-pergunta">Titulo</a>
    <img src="..." class="middle FAQ-abre right" />
    <img src="..." class="middle FAQ-fecha right" />
    <div class="clear FAQ-conteudo">
        texto e mais texto
    </div>
</div>

You make bind of click in the .FAQ-pergunta, we can choose the context of the selectors as his father, where by doing "cross" we get all the necessary elements in the script.

The use of context is as follows:

$('.seletor', contexto).oqueseja();

With this, any element that "matches" this selector from the context subtree will be included. The rest will be ignored.

The default selector starts the search for the document. Using the context it starts the search for the element context.

In your script will be:

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 $this = SC(this);
        var $pai = $this.parent(); // O pai, que engloba tudo que voce usa nesse script será o contexto!
        var faqTemClasse = SC('.FAQ-pergunta', $pai).hasClass('FAQ-atual');

        if (faqTemClasse) {
            SC('.FAQ-pergunta', $pai).removeClass('FAQ-atual');
            SC('.FAQ-conteudo', $pai).fadeOut(300);
            SC('.FAQ-fecha', $pai).hide();
            SC('.FAQ-abre', $pai).show();
        } else {
            SC('.FAQ-conteudo', $pai).fadeOut(300);
            SC('.FAQ-pergunta', $pai).addClass('FAQ-atual');
            SC('.FAQ-conteudo', $pai).fadeIn(300);
            SC('.FAQ-fecha', $pai).show();
            SC('.FAQ-abre', $pai).hide();
        }
    });
});

Example in Jsfiddle.

More information take a look at the paragraph Selector Context in jQuery documentation.

Answer 2

You can use toggle on the clicked element and not to operate with others, thus:

Jquery:

var SC = jQuery.noConflict();

SC(document).ready(function() {
    SC('.FAQ-conteudo, .FAQ-fecha').hide(); // oculta todos os .FAQ-conteúdo e .FAQ-fecha
    SC('.FAQ-pergunta').click(function(){
        SC('.FAQ-pergunta').not(this).removeClass('FAQ-atual'); // remove a classe FAQ-atual de todas as perguntas, exceto da pergunta clicada
        SC('.FAQ-conteudo').not(SC(this).siblings('.FAQ-conteudo')).slideUp(300); // oculta todos os .FAQ-conteúdo abertos, exceto o irmão da pergunta clicada
        SC('.FAQ-fecha').not(SC(this).siblings('.FAQ-fecha')).hide(); // oculta todos os .FAQ-fecha, exceto o irmão da pergunta clicada
        SC('.FAQ-abre').not(SC(this).siblings('.FAQ-abre')).show(); // mostra todos os .FAQ-abre, exceto o irmão da pergunta clicada
        SC(this).toggleClass('FAQ-atual').siblings('.FAQ-conteudo').slideToggle(300).siblings('.FAQ-fecha, .FAQ-abre').toggle(); // inverte a classe FAQ-atual na pergunta clicada . inverte o slide no .FAQ-conteúdo irmão da pergunta clicada . inverte a exibição em .FAQ-fecha e .FAQ-abre, irmãos da pergunta clicada
    });
});

See working on Jsfiddle

---

Some of the functions of jquery have their version toggle, which acts by reversing the current status, so we have:

toggleClass(classe) if the class is added it removes, and if it is not, it adds.

slideToggle if this visible it hides with slide, if this hidden it displays with slide.

toggle if this visible he conceals, if this hidden he displays.

---

The function .not(elemento) removes from the selection the elements listed in it.