Show/hide function with multiple div ids

Question

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:

<div id="meet_growlab">BLAH BLAH BLAH
<p><a href="#" id="growlab_close">Close</a></p>
</div>

<div id="buddy_tv">BLAH BLAH BLAH
<p><a href="#" id="buddytv_close">Close</a></p>
</div>

<ul>
    <li><a href="#" id="growlab" rel="#meet_growlab">Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver (June 24, 2011)</a></li>
    <li><a href="#" id="buddytv" rel="#buddy_tv">Building the Web's Best Entertainment-Based Community Site: Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)</a></li>
</ul>

It works, but it's not pretty.

Answer 1

1. You could have the hide/show divs inside a container, and then on .ready hide all its immediate children;
2. You could then target all a.close inside this container, and on click hide the clicked anchor's grand-grandparent;
3. And finally target all anchors inside the items list, and on click show the div corresponding to the anchor's rel;
4. 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:

<div id="eventDescriptions">
  <div id="meet_growlab">BLAH BLAH BLAH
    <p><a href="#growlab" class="close">Close</a></p>
  </div>
  <div id="buddy_tv">BLAH BLAH BLAH
    <p><a href="#buddytv" class="close">Close</a></p>
  </div>
</div>
<ul id="eventTitles">
    <li><a href="#" id="growlab" rel="#meet_growlab">Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver (June 24, 2011)</a></li>
    <li><a href="#" id="buddytv" rel="#buddy_tv">Building the Web's Best Entertainment-Based Community Site: Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)</a></li>
</ul>

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:

1. Good job on using rel;
2. Instead of <img border=0 ... you could use CSS - a img { border: 0;};
3. #social is a list, so it could be a ul instead of a div.