jQuery Controlling Single DIVs With the Same Class (Siblings?)

Question

I am building a FAQ module for my site and I want to be able to control single elements on the page even though they all have the same class. I believe this comes under siblings which I am not yet familiar with.

Basically I want the user to be able to click the question div and then when they click it the answer div within the same div as the question div is set to show (if that makes sense!). Any help would be greatly appreciated.

<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

If I understand your question correctly, you should Start by setting all answers as hidden in the css: .answer {display:none;}

Then you can use jquery to show the correct answer to the clicked questions :

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

Edit: you can also use .toggle() instead of .show() to show/hide.

Answer 2

You should probably check out this question where something similar is done.

Basically, you first need to setup ID's for your elements so that you can identify single elements within the set classes.

You could then add a click event handler which would set the selected item and show the appropriate answer.

You can see the syntax for grabbing siblings in the documentation here.