jQuery Controle Individual DIVs com a mesma classe (irmãos?)

Question

Estou construindo um módulo FAQ para o meu site e eu quero ser capaz de controlar elementos únicos na página mesmo que todos eles têm a mesma classe. Eu acredito que este vem sob irmãos que eu ainda não estou familiarizado com.

Basicamente eu quero que o usuário seja capaz de clicar no div questão e, em seguida, quando eles clique nele o div resposta dentro do mesmo div como o div questão está definida para mostrar (se isso faz sentido!). Qualquer ajuda seria muito apreciada.

<div class="set">
<div class="question">What is the airspeed velocity of an unladen swallow?</div>
<div class="answer">Although a definitive answer would of course require further measurements, published species-wide averages of wing length and body mass, initial Strouhal estimates based on those averages and cross-species comparisons, the Lund wind tunnel study of birds flying at a range of speeds, and revised Strouhal numbers based on that study all lead me to estimate that the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour. </div>
</div>

<div class="set">
<div class="question">What is the airspeed velocity of an unladen swallow?</div>
<div class="answer">Although a definitive answer would of course require further measurements, published species-wide averages of wing length and body mass, initial Strouhal estimates based on those averages and cross-species comparisons, the Lund wind tunnel study of birds flying at a range of speeds, and revised Strouhal numbers based on that study all lead me to estimate that the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour. </div>
</div>

<div class="set">
<div class="question">What is the airspeed velocity of an unladen swallow?</div>
<div class="answer">Although a definitive answer would of course require further measurements, published species-wide averages of wing length and body mass, initial Strouhal estimates based on those averages and cross-species comparisons, the Lund wind tunnel study of birds flying at a range of speeds, and revised Strouhal numbers based on that study all lead me to estimate that the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour. </div>
</div>

Answer 1

Se entendi sua pergunta corretamente, você deve Comece definindo todas as respostas como escondidos no css: .answer {display: none;}

Então você pode usar jquery para mostrar a resposta correta às perguntas clicado:

$(document).ready ( function () {
    $('.question').click(function() {
        $(this).next('.answer').show();
    });
});

Edit:. Você também pode usar .toggle () em vez de .mostrar () para exibir / ocultar

Answer 2

Você provavelmente deve verificar este questão em que algo semelhante é feito.

Basicamente, você primeiro precisa ID de instalação é para os seus elementos para que você possa identificar elementos individuais dentro das classes definidas.

Você pode então adicionar um manipulador de eventos click, que iria definir o item selecionado e mostrar a resposta adequada.

Você pode ver a sintaxe para pegar os irmãos na documentação aqui .