Show/hide function with multiple div ids

I know close to nothing about jQuery, but I swear I'm trying to learn. The thing is, I've got some code that works, but I know it's repetitive and probably not kosher for a real programmer, which is why I've turned to you all.

What I want to do is show/hide (or toggle, whatever you think is best) some informational divs, or so you might call them, on this page.

The show/hide code that I have right now stands at this:

$(document).ready(function(){

    $('#meet_growlab, #buddy_tv').hide();

    $('a#growlab').click(function(){
    $('#meet_growlab').show('slow');
});

    $('a#growlab_close').click(function(){
    $('#meet_growlab').hide('slow');
})

    $('a#buddytv').click(function(){
    $('#buddy_tv').show('slow');
});

    $('a#buddytv_close').click(function(){
    $('#buddy_tv').hide('slow');
})

});

With the HTML being:

BLAH BLAH BLAH
Close

BLAH BLAH BLAH
Close

    Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver (June 24, 2011)
    Building the Web's Best Entertainment-Based Community Site: Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)

It works, but it's not pretty.

• You could have the hide/show divs inside a container, and then on .ready hide all its immediate children;

• You could then target all a.close inside this container, and on click hide the clicked anchor's grand-grandparent;

• And finally target all anchors inside the items list, and on click show the div corresponding to the anchor's rel;

• I would also make the anchor's href the same as its rel, so that if any user has JavaScript disabled the anchor still works.

So, HTML:

  BLAH BLAH BLAH
    Close
  
  BLAH BLAH BLAH
    Close
  

    Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver (June 24, 2011)
    Building the Web's Best Entertainment-Based Community Site: Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)

and a more compact and DRY JQuery:

$(document).ready(function(){
  $('#eventDescriptions>div').hide();
  $('#eventTitles a').click(function(){
    var target = $(this).attr("rel");
    $(target).show('slow');
  });

  $('#eventDescriptions .close').click(function(){
    $(this).parent().parent().hide('slow');
  })
});

Here, a JSFiddle: http://jsfiddle.net/QYjLY/

Other things I quickly noticed:

• Good job on using rel;

• Instead of






• #social is a list, so it could be a ul instead of a div`.

StackExchange Code Review Q#5563, answer score: 2