Say I have a <dl> with all the <dd>s hidden. Clicking on a <dt> toggles the <dd>s that follow it using the following code:

$(this).nextUntil('dt').toggle();

/

Now, I want to automatically hide the <dd>s following the other <dt>s, so I try to grab the siblings with this code:

$(this).nextUntil('dt').toggle()
    .siblings().filter('dd').hide();

/

But nothing happens, because each <dd> I've already selected with .nextUntil is a sibling to each other. As a result, they're all hidden and nothing gets shown.

There must be a pact way to tell jQuery to select all the siblings EXCEPT those I've already selected, but I can't see it. Ideas?

Say I have a <dl> with all the <dd>s hidden. Clicking on a <dt> toggles the <dd>s that follow it using the following code:

$(this).nextUntil('dt').toggle();

http://jsfiddle/mblase75/FZQj7/

Now, I want to automatically hide the <dd>s following the other <dt>s, so I try to grab the siblings with this code:

$(this).nextUntil('dt').toggle()
    .siblings().filter('dd').hide();

http://jsfiddle/mblase75/FZQj7/1/

But nothing happens, because each <dd> I've already selected with .nextUntil is a sibling to each other. As a result, they're all hidden and nothing gets shown.

There must be a pact way to tell jQuery to select all the siblings EXCEPT those I've already selected, but I can't see it. Ideas?

• javascript
• jquery

Share Improve this question Follow edited Jul 20, 2012 at 16:07 Blazemonger asked Jul 20, 2012 at 15:09 BlazemongerBlazemonger 93.1k2727 gold badges145145 silver badges181181 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

How about this? Notice the use of the not function, which you can read about here.

http://jsfiddle/lbstr/FZQj7/6/

$('dt').on('click',function() {
    var $this = $(this),
        $firstGroup = $this.nextUntil('dt');
    $firstGroup.toggle();
    $this.siblings('dd').not($firstGroup).hide();
});​

You could do it from the parent:

$('dt').on('click',function() {
    $(this).nextUntil('dt').toggle().siblings("dt").not(this).nextUntil('dt').hide();
});​

http://jsfiddle/FZQj7/7/

A simple solution is to apply a class to the elements you show. On each click, you can hide the elements with this class before showing the desired set.

http://jsfiddle/FZQj7/11/

$('dt').on('click',function() {
    $('.visibledd').hide().removeClass('visibledd');
    $(this)
        .nextUntil('dt')
        .toggle()
        .addClass('visibledd');
});​

Here's something a little simpler than these others:

$('dt').on('click',function() {
    $(this).siblings('dd').hide();
    $(this).nextUntil('dt').show();
});