Jquery specific div selection without using accordian

Question

HI,

I'm trying to get accordion like functionality without using jQuery's UI accordion feature.

How can I select the related (child?) div to open when using a link attached to a dt element?

At present my code is

<div id="listings">
  <dl class="listings">
    <dt>
      Get the Milk
    </dt>
    <dd>
      Due Date: 17th Oct
    </dd>
    <dd>
      <a href="#" class="more">more details 2</a>
    </dd>
    <dd>
      <a href="#">mark as complete</a>
    </dd>
  </dl>
  <div class="more_details">
    <p>
      This is some details about the task that I would to have appear when
      the more details 1 link is clicked
    </p>
  </div>
  <dl class="listings">
    <dt>
      Go to Work
    </dt>
    <dd>
      Due Date: 22th Oct
    </dd>
    <dd>
      Site: None
    </dd>
    <dd>
      <a href="#" class="more">more details 2</a>
    </dd>
    <dd>
      <a href="#">mark as complete</a>
    </dd>
  </dl>
  <div class="more_details">
    <p>
      This is some details about the task that I would to have appear when
      the more details 2 link is clicked
    </p>
  </div>
</div>

The jQuery I'm using is

$('.more').click(function() {
    $('.more_details').slideToggle('fast', function() { });
    return false;
});

But the problems I have are

1. When the link with class more is clicked, naturally all the more_details divs open

2. The amount of items in the list will vary as they are being generated from a database query so I cant used fixed, unique class names

Thanks

Jz

Answer 1

Use jquery's next() and parent:

 $(this).parents('.listings').next('.more_details').slideToggle('fast', function() { });

This will go 'up' the dom and find a .listings element (note that if you have more .listings elements even higher up, add .first() after it. Then next('.more_details') examines 'sibblings' to find one that suites the definition of '.more_details'.

There's another option if you are willing to change your html. Surround both the dl and the div with another tag, give it a class name, say '.listing_container'. Then you can do $(this).parents('.listing_container').find('.more_details'). This would work better if you have cases where a listing is not followed by it's own .more_details element.

Answer 2

The basics are you need to go from this and find the element relatively using tree traversal (moving around the DOM from where you clicked). The easiest way looks like this:

$('#listings .more').click(function(e) {
  $(this).closest('.listings').next('.more_details').slideToggle('fast');
  e.preventDefault();
});​

You can test it out here. This goes from the .more you clicked on up to the .listings element using .closest() then get's its .next() sibling (.more_details) and does a .slideToggle() on that (no need for the callback if you're not doing anything in it).

---

However, a more efficient way to do this once you have more than a few items in your list is to use .delegate() so there's just one click handler up on #listings, like this:

$('#listings').delegate('.more', 'click', function(e) {
  $(this).closest('.listings').next('.more_details').slideToggle('fast');
  e.preventDefault();
});​

You can test that version out here.