Question

I have the following (basically, schedule_box is the wrapper, and there can be as many client_schedule divs as needed). I have .details hidden by default, and I want the details to show when the down arrow is clicked:

<div class="schedule_box">
    <div class="client_schedule">
        <span class="edit"> 
            <img src="images/manage_companies/down-icon.png" class="down">
        </span>
        <span class="details">
            test
        </span>
    </div>
   <div class="client_schedule">
        <span class="edit"> 
            <img src="images/manage_companies/down-icon.png" class="down">
        </span>
        <span class="details">
            test
        </span>
    </div>
</div> 

JQuery (when I use the entire contact box, it works):

$('.schedule_box').find('.details').hide().end().find('.down').click(function() {
}

But, when I try to use .down, it’s having problems finding .details:

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

Answer 1

try

var details = $(this).parents('.client_schedule').find('.details');