Sub_Seven - 8:10 pm on Sep 14, 2012 (gmt 0)

Hello people, when I come here is because I'm already desperate, frustrated and about to start kicking walls.

It pisses me off the fact that I can't seem to get a handle on jQuery for simple stupid things that should be easy.

Hoping to get someone to point me in the right direction, I have this code:

<div id="leftPanel"> <div> <p>Cia Logo</p> </div> <dl> <dt>Item 1</dt> <dd>Subitem 1</dd> <dd>Subitem 2</dd> <dd>Subitem 3</dd> <dd>Subitem 4</dd> <dd>Subitem 5</dd> <dt>Item 2</dt> <dd>Subitem 1</dd> <dd>Subitem 2</dd> <dd>Subitem 3</dd> <dd>Subitem 4</dd> <dd>Subitem 5</dd> <dt>Item 3</dt> <dd>Subitem 1</dd> <dd>Subitem 2</dd> <dd>Subitem 3</dd> <dd>Subitem 4</dd> <dd>Subitem 5</dd> </dl> </div>

and this jquery to slide down the dds when you mouseover their dt:

<script> (function() { $('#leftPanel dd').hide(); $('#leftPanel').on('mouseenter', 'dt', function() { $(this).nextUntil('dt').slideDown(); }); })(); </script>

If you mouseover on any of the dts it works fine, it slides down all the dds BUT *BUT* what I cannot figure out is how to tell jQuery to hide all dds that are not under $(this) dt.

I thought something like this should do the trick:

$(!this).children('dt').slideUp(); or this
$!(this).children('dt').slideUp();

But obviously it is not that simple.

Could anyone PLEASE get me out of my misery?

Thanks.