Hi,
If you just want to do a simple show/hide then you don't need to add a
class. You can use jQuery hide() and toggle() functions.
Like this:
$('#tabs dd').hide();
$('#tabs dt a').click(function() {
$(this).parent().next().toggle();
return false;
});
Paul
On Oct 27, 3:59 pm, Michel Belleville <michel.bellevi...@gmail.com>
wrote:
> <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>
