Stuck on a .toggle can't close the item again

Stuck on a .toggle can't close the item again

Hi I've got a page that's a calendar. Users can add events to each date. If there's an event then a marker shows on that date that a user can click on to see a jquery popup of the event. This all works great for multiple events on one page. The problem i'm having is closing the popup after it's open. I don't know if it's because i want to open it with one button but close it with a generic one on the popup. Any help would be great. My code is below thanks.

<script type="text/javascript">
   $(document).ready(function()
   {
      $('[class^=toggle-item]').hide();
      
      $('[class^=link]').click(function()
      {
         var $this = $(this);
         var x = $this.attr("className");
         
         $('.toggle-item-' + x).toggle(400);
         return false;
      });
      
      $('.closeEvent').click(function()
      {
         var $this = $(this);
         var x = $this.attr("className");
         
         $('.toggle-item-' + x).toggle(400);
      });
         
</script>

   <table border='0' width='455px' cellpadding='2' cellspacing='2' class='calendarTable'>
      <tr >
         <td class='calCellTop'>SUN</td>
         <td class='calCellTop'>MON</td>
         <td class='calCellTop'>TUE</td>
         <td class='calCellTop'>WED</td>
         <td class='calCellTop'>THU</td>

         <td class='calCellTop'>FRI</td>
         <td class='calCellTop'>SAT</td>
      </tr>
   <tr>
<td class='calCell' valign='middle'><div class='eventMarker'><a href='#' class='link2'>x</a></div><div class='hiddenEvent toggle-item-link2'><a href='#' class='closeEvent'>close X</a><br />Start Time: 1233485100<br />End Time: 1233495900<br />Event: The event<br />Venue: the venue<br />Start Time: the details</div><a href='#' class='calLink addEvent'><span class='link'>1</span></a></td>

<td class='calCell' valign='middle'><a href='#' class='calLink addEvent'><span class='link'>2</span></a></td>
<td class='calCell' valign='middle'><a href='#' class='calLink addEvent'><span class='link'>3</span></a></td>
<td class='calCell' valign='middle'><a href='#' class='calLink addEvent'><span class='link'>4</span></a></td>
<td class='calCell' valign='middle'><a href='#' class='calLink addEvent'><span class='link'>5</span></a></td>
<td class='calCell' valign='middle'><a href='#' class='calLink addEvent'><span class='link'>6</span></a></td>
<td class='calCell' valign='middle'><a href='#' class='calLink addEvent'><span class='link'>7</span></a></td>
</tr>
</table>


The line in the table with the close tag is the one i'm hoping to close the div with. Hope this makes sense if not I could upload the site.

Cheers