<dt><a href="#one">tab 1</a></dt>
<dd id="one">
<h2>Container 1</h2>
<p>Random content.</p>
</dd>
$('dt a') who's your daddy ? it's dt of course, because I'm a.
So daddy, who are your children ? Well I see only a.
Well, where's the dd ? It's dt's sibling of course :
<dt>...</dt>
<dd>...</dd>
Yeah, apparently there's no dd in your dt. So :
$(this).closest('dt').next('dd').removeClass('hide');
Should do the trick, though you might prefer using toggleClass() .
Michel Belleville
2009/10/27 Martin <martin.m.ri...@gmail.com>
>
> I'm trying to do a simple show/hide. When a user clicks an a link, I
> want to hide the dd for that link. Any ideas why the .children() is
> not working?
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> <html>
> <head>
> <title>Tabs 1</title>
>
> <style type="text/css">
> .hide {display: none;}
> </style>
>
> <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
>
> <script type="text/javascript">
> $(document).ready(function(){
> $('#tabs dd').addClass('hide');
> $('dt a').click(function() {
>
> $(this).parent().children().removeClass('hide');
> });
> });
> </script>
> </head>
> <body>
> <h1>Test 1</h1>
> <dl id="tabs">
> <dt><a href="#one">tab 1</a></dt>
> <dd id="one">
> <h2>Container 1</h2>
> <p>Random content.</p>
> </dd>
> <dt><a href="#two">tab 2</a></dt>
> <dd id="two">
> <h2>Container 2</h2>
> <p>Random content.</p>
> </dd>
> <dt><a href="#three">tab 3</a></dt>
> <dd id="three">
> <h2>Container 3</h2>
> <p>Random content.</p>
> </dd>
> </dl>
>
> </body>
> </html>
>
