How to apply toggle slide effect on one div at a time on click using JQuery provided multiple divs?
<p>JS:</p>

<pre><code>$(function () {      
    function runEffect() {           
        var options = {};            
        $(".effect").toggle('slide', options, 500/*time*/);
    };
    $(".button").click(function () {
        runEffect();
        return false;
    });
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="riddle1"&gt;
&lt;div class="riddle-answer"&gt; 
        &lt;a href="#" class="button" style="float:left;"&gt;
         &lt;img src="" width="45" height="112" title="" alt="Answer" /&gt;&lt;/a&gt;
        &lt;div class="effect"&gt;    
        &lt;p&gt;Test riddle Test riddle Test riddle Test riddle Test riddle Test riddle&lt;/p&gt;
       &lt;/div&gt;
&lt;/div&gt;

&lt;div class="riddle-top"&gt;&lt;/div&gt;

&lt;div class="riddle-mid"&gt;
 &lt;p&gt;If three cats catch three mice in three minutes, how many cats would be needed to catch 100 mice in 100 minutes? &lt;/p&gt;
&lt;/div&gt;

&lt;div class="riddle-bot"&gt;&lt;/div&gt;
</code></pre>

<p>
    There is another div for riddle2 same as above, however now when clicked on image which is link, it applies toggle effect to both the boxes or DIVs- riddle1 and riddle2. And if used button and effect as id rather than class, could apply toggle effect to just one DIV. So how can apply toggle effect to both but one at a time.</p>
