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?
Share Improve this question edited Jul 20, 2012 at 16:07 Blazemonger asked Jul 20, 2012 at 15:09 BlazemongerBlazemonger 93.1k27 gold badges145 silver badges181 bronze badges4 Answers
Reset to default 3How 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();
});