Hide/Reveal Comments in Wordpress

Hide/Reveal Comments in Wordpress

I'm trying to hide and show comments on my blog.
I am having problems getting the "reveal" & "close" buttons to change according to the toggle.


the blog is up for my design @ http://www.relativityphoto.com/test/

here's my code:

jquery:
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $('#commentbox').hide();
  4. $('a.comment').click(function() {
  5. var id = $(this).attr('id');
  6. $('#commentbox' + id).toggle(500);
  7. $(this).toggleClass("active");
  8. // alert(id);
  9. return false;
  10.  });   
  11. }); 
  12. </script>


CSS:
  1. a.comment    {
  2.                         background: url(images/rollover-reveal_post.png) 0px 0px no-repeat;
  3.                         width: 173px;
  4.                         height: 57px;
  5.                         position: relative;
  6.                         bottom: -35px;
  7.                         right: -500px;
  8.                         display: block;
  9.                    
  10.                     }
  11.                
  12. a.comment:active    {
  13.                         background: url(images/rollover-close_post.png) 0 0 no-repeat;
  14.                     }   







HTML:
  1. <div id="commentboxa0x4" class="commentbox" style="display:none">
  2. Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!
  3. <img src="http://www.relativityphoto.com/test/wp-content/themes/stephenburtonmedia/images/test.jpg" width="655" height="480" alt="test" />
  4. </div>
  5. <div id="revealPost">
  6. <a href="#" id="a0x4" class="comment" name="3242">
  7. </a>
  8. </div>

I've searched tutorials and I just don't understand why it won't work.
Any thoughts?