Question

So i have to come up with some kind of mini script that behaves like this,

click a sentence, or a question, and the answer drops(slide down). click it again and it slides up etc..

simple enough….

Now im a noob so for example, if i have 1 questions, then of course ill write something like this:

css:

.answer { display:none }

js/jQ:

var question = $('.question');
var answer = $('.answer');

question.click( function(){
    answer.slideToggle(500);    
});

etc, but so now if i have say, 5 questions then ill have to create 5 more variables(or call em directly with jq) and etc etc…long story short, itll be code for EVERY question/answer set which will get unwieldy fast

im trying to write something a bit smarter (and much less code) so to test my logic i try this:

question.click( function(){
    if($(this).parent().hasClass('open')){
        $(this).parent().removeClass('open');
        alert("its open");  
    } else {
        alert("its not open");
        $(this).parent().addClass('open');

    }
});

now when i try this, it works. when its open it alerts open and removes the class open so on its next click, its not open and alerts me so aswell…so small test working.

So naturally this means i SHOULD be able to add SOME kind of animate/slide code to get me rolling and it SHOULD work but either A, it doesnt work, or B, it opens ALL the answers at the same time.

ive tried

question.click( function(){
    if($(this).parent().hasClass('open')){
        $(this).parent().removeClass('open');
        //alert("its open");
        answer.slideUp(500);    
    } else {
        //alert("its not open");
        $(this).parent().addClass('open');

        answer.slideDown(500);
    }
});

and this one opens ALL the answers at the same time no matter what question i click on.

i figured, let me add a “this” to the answer line to localize the event…maybe something like.

$(this).answer.slideDown(500);

but this plainly just doesnt work.

Ive also tried something like $(this).find('answer').slideUp(500);

I KNOW im close lol. Any tips/links, explanations etc ill gladly appreciate.

Answer 1

http://jsfiddle.net/7eHzz/

<div class="question">
   q1
    <div class="answer">
      a1
    </div>
</div>



var question = $('.question');
var answer = $('.answer');

question.click( function(){
    $(".answer",$(this)).slideToggle(500);    
});