Thanks guys,
Nice to get such a quick reply. Thanks for the tips!
Martin
On Oct 27, 4:29 pm, Paul Mills <paul.f.mi...@gmail.com> wrote:
> 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/27Martin<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>
