How to stay within a 'instance' using JQuery
<p>I'm currently learning JavaScript/JQuery, but have an issue at work that I'm running into.</p>

<p>I've assigned a class of 'question' to an<code>&lt;a&gt;</code>tag, and 'answer' to a<code>&lt;div&gt;</code>. When a user clicks on the question, the answer will slide down. However, the problem I'm running into is that when they click on a <code>&lt;a href="#" class="question"&gt;</code>, all of the <code>&lt;div class="answer"&gt;</code>'s are displayed.</p>

<p>How can I make it so that only one .answer for it's parent .question is displayed when clicked?</p>

<p>Here is my HTML:</p>

<pre><code>&lt;li class="question"&gt;&lt;a href="#"&gt;Question 1&lt;/a&gt;
&lt;div class="answer"&gt;&lt;p&gt;This is answer for question 1&lt;/p&gt;&lt;/div&gt;&lt;/li&gt;
&lt;li class="question"&gt;&lt;a href="#"&gt;Question 2&lt;/a&gt;
&lt;div class="answer"&gt;&lt;p&gt;This is answer for question 2&lt;/p&gt;&lt;/div&gt;&lt;/li&gt;
</code></pre>

<p>Here is my jquery:</p>

<pre><code>&lt;script&gt;
  jQuery(document).ready(function ($) {
    $('div.answer').hide();
    $('li.question').click(function() {
      $('div.answer').slideDown('fast');
      return false;
    });
  });
&lt;/script&gt;
</code></pre>

<p>and the site is: <a href="http://topactioninvestments.com/faq/" rel="nofollow">http://topactioninvestments.com/faq/</a></p>

<p>Thanks!</p>
