Jquery: Finding Element In DIV
<p>I have the following (basically, <code>schedule_box</code> is the wrapper, and there can be as many <code>client_schedule</code> divs as needed). I have <code>.details</code> hidden by default, and I want the <code>details</code> to show when the down arrow is clicked:</p>

<pre><code>&lt;div class="schedule_box"&gt;
    &lt;div class="client_schedule"&gt;
        &lt;span class="edit"&gt; 
            &lt;img src="images/manage_companies/down-icon.png" class="down"&gt;
        &lt;/span&gt;
        &lt;span class="details"&gt;
            test
        &lt;/span&gt;
    &lt;/div&gt;
   &lt;div class="client_schedule"&gt;
        &lt;span class="edit"&gt; 
            &lt;img src="images/manage_companies/down-icon.png" class="down"&gt;
        &lt;/span&gt;
        &lt;span class="details"&gt;
            test
        &lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt; 
</code></pre>

<p><br>
<strong>JQuery</strong> (when I use the entire contact box, it works):</p>

<pre><code>$('.schedule_box').find('.details').hide().end().find('.down').click(function() {
}
</code></pre>

<p>But, when I try to use <code>.down</code>, it's having problems finding <code>.details</code>:</p>

<pre><code>$('.schedule_box').find('.details').hide().end().find('.down').click(function() {
     var details = $(this).find('.details');
     if (details.is(':visible')) {
         details.slideUp();
     } else {
         details.slideDown();
     }
});
</code></pre>
