difficulty with .closest ,parent, next functions in jquery
<p>So im trying to use the .closest function and been having problems so i went with something else but this left me stumped so trying to figure it out.</p>

<p>this is the html:</p>

<pre><code> &lt;div class="faqW"&gt;
        &lt;div class="faqQues2"&gt; the question goes here &lt;/div&gt;
        &lt;br/&gt;
        &lt;div class="faqAns2"&gt; answere to faq question here.&lt;/div&gt;
    &lt;/div&gt;&lt;!-- faq wrap ender --&gt;
</code></pre>

<p>this is the CSS hiding the answer(will change to js to hide after im done)</p>

<pre><code>.faqAns2{
    background-color:#CC6;
    color:black;
        display:none;
}
</code></pre>

<p>this is the jq im <strong>trying</strong> to use:</p>

<pre><code>var question = $('.faqQues');
var answer = $('.faqAns');
var question2= $('.faqQues2');
</code></pre>

<p>(varying tries with no results)</p>

<p>try 1 :</p>

<pre><code>question2.click( function(){
    $(this).parent().next('.faqAns2').slideToggle(500); 
});
</code></pre>

<p>or</p>

<pre><code>question2.click( function(){
    $(this).parent('.faqW').next('.faqAns2').slideToggle(500);  
});
</code></pre>

<p>try 2:</p>

<pre><code>    question2.click( function(){
    $('.faqW',$(this)).closest('.faqAns2').slideToggle(500);    
});
</code></pre>

<p>try 3:</p>

<pre><code>    question2.click( function(){
$(this).next('.faqAns2').slideToggle(500);  
});
</code></pre>

<p>Ive tried numerous ways, including rearanging the html for .parent etc, but to no avail.</p>

<p>What im wanting is that, when the question is clicked, that the closest answer is toggle displayed.</p>

<p>I cant figure out what im doing wrong.</p>

<p>Thanks in advanced.</p>
