problem with jquery slidToggle

[ads112001]

I have a page with a listing of events and i'd like to pop out the description when an event is clicked. Trying to get this div.popBox to slideToggle but it'll only work if the div immediately follows the div with the a.pop in it.

$(function()
 {
 $("a.pop").click(function(event) {
 event.preventDefault();
 $(this).parent().next('div.popBox').slideToggle();
 });

 $("a.pop a").click(function(event) {
 event.preventDefault();
 });
 });


<div class="listingIcon"><img src="img/calendar/icon-wolfDen.gif" /></div>

<div class="listingTitle"><a href="#" class="pop">The Happening - A 60s Musical Experience</a></div>

<div class="listingTime">8:00pm</div>

<div class="listingButtons"><a href="#">Reserve Now &raquo;</a></div>

<div class="listingDetails popBox" style="display:none;">
  <p><img class="listingImage" src="http://mohegansun.com/img/entertainment/acts/94230b73867439ce82bf360e8de32194_sm.jpg" width="250" height="100" alt="" />Details go here.</p>
</div>

I've tried using closest and that doesn't seem to work either.

[Fotiman]

You seem to be suffering from divitis. Too many div elements instead of semantic alternatives. But in any case:

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

[api.jquery.com...]

In other words, put popBox as the next sibling if you want to use next(). Otherwise, you might want to try nextAll() or siblings(), and then filter on the first result found. So maybe something like:

$(this).parent().nextAll('div.popBox').first().slideToggle();