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:

&lt;div id="meet_growlab"&gt;BLAH BLAH BLAH
&lt;p&gt;&lt;a href="#" id="growlab_close"&gt;Close&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;div id="buddy_tv"&gt;BLAH BLAH BLAH
&lt;p&gt;&lt;a href="#" id="buddytv_close"&gt;Close&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;

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


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:

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


and a more compact and DRY JQuery:

$(document).ready(function(){
  $('#eventDescriptions&gt;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 &lt;img border=0 ... you could use CSS - a img { border: 0;};
#social is a list, so it could be a ul instead of a div.