[jQuery] Re: A Beginner Question

[Karl Swedberg]

Hi Volkan,

You could use John Resig's .nextUntil() method.

Drop this in your js file somewhere...

/******** next until > ****************/
$.fn.nextUntil = function(expr) {
   var match = [];

   // We need to figure out which elements to push onto the array
   this.each(function(){
       // Traverse through the sibling nodes
       for( var i = this.nextSibling; i; i = i.nextSibling ) {
           // Make sure that we're only dealing with elements
           if ( i.nodeType != 1 ) continue;

           // If we find a match then we need to stop
           if ( jQuery.filter( expr, [i] ).r.length ) break;

           // Otherwise, add it on to the stack
           match.push( i );
       }
   });

   return this.pushStack( match, arguments );
};

/******** < next until ****************/

Then, your code should look like this ...

$(document).ready(function() {
  $("dt > a").click(function(){
        $(this).parent().nextUntil('dt').toggle();
        return false;
  });
});


--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Jan 22, 2008, at 12:37 PM, Volkan Görgülü wrote:

Hi,

Lets say I have a Definition List like shown below.

<dl>
<dt><a href="#">Item Group A</a></dt>
<dd>Item 1</dd>
<dd>Item 2</dd>
<dt><a href="#">Item Group B</a></dt>
<dd>Item 1</dd>
<dd>Item 2</dd>
<dd>Item 3</dd>
</dl>

What I want to achieve is whenever I click an <a> tag in <dt> I want
to show <dd> tags inside the clicked <dt>

I am using

$(document).ready(function() {
  $("dt > a").click(function(){$("dd").toggle(); return false;});
});

But it opens every <dd>.

Any help or guidance will be appreciated.