Problem with jQuery to open / close divs

In this case, since you have several questions with equal marking just 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 bind click to .FAQ-pergunta , we can choose the context of the selectors as his parent, where doing "cross" we get all the necessary elements in the script.

Use of context is done as follows:

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

With this, any element matching this selector from the context sub-tree will be included. The rest will be ignored.

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

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 on JSFiddle .

For more information, take a look at the Context Selector paragraph in the jQuery documentation .

You can use toggle in the clicked element and not to work with others, like this:

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 at JSfiddle

Some of the jquery functions 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 is visible it hides with slide, if hidden it displays with slide.

toggle if this is visible it hides, if it is hidden it displays.

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