Attiva / disattiva l'elemento successivo (jQuery)

Question

Html:

<div class="interview">
    <h4>Interview</h4>
    <a href="#" class="question">This is question 1?</a>
    <div class="answer">This is an answer!</div>
    <a href="#" class="question">This is question 2?</a>
    <div class="answer">This is an answer!</div>
    <a href="#" class="question">This is question 3?</a>
    <div class="answer">This is an answer!</div>
</div>

jQuery:

if ($('interview')[0]) {
    $('interview .question').toggle(function () {
        $(this).next('.answer').slideIn();
    },
    function () {
        $(this).next('.answer').slideOut();
    });
}

... Non riesco a capire perché non funziona.

Answer 1

Mente il punto:

.interview

Inoltre, non c'è no slidein, Tentativo slideDown e slideUp: http://jsbin.com/ajawo3

Se non hai altro codice in queste funzioni, una scelta migliore è slideToggle: http://api.jquery.com/slidetoggle/

Answer 2

Stai usando un selettore di classe e dovrebbe iniziare con a .

Quindi devi cambiare

$('interview .question')

a

$('div.interview .question')

Answer 3

Ecco una versione semplice ...

$('a.question').click(function () {     
    $(this).next('.answer').slideToggle();
});