Here's how you do it (tested and working):
<!-- HTML -->
<dl>
<dt><a href="No-Javascript-URL_A">Item Group A</a></dt>
<dd>Item 1</dd>
<dd>Item 2</dd>
<dt><a href="No-Javascript-URL_B">Item Group B</a></dt>
<dd>Item 1</dd>
<dd>Item 2</dd>
<dd>Item 3</dd>
</dl>
<script>
$(document).ready(function() {
$('dt').click(function() {
var obj = $(this).next();
while (obj.is('dd')) {
obj.toggle();
obj = obj.next();
}
return false;
});
});
</script>
Just a note - it would be cool if nextAll had an option to enable this
sort of functionalty (ie, stop selecting once it hits something that
doesn't match the selector).
On Jan 23, 6:37 am, "Volkan Görgülü" <[EMAIL PROTECTED]> 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.
