Showing and hiding in jquery
<p>How can I hide and show a div (and change the width of another div) using the same link,for example I can show A div and change its widht. How can I make it so that if the user clicks again, the width goes back to 600px and the right div is hidden.</p>

<pre><code> $("a").click(function(event){
         $('#main-content').width(800);
         $('#right').show('slow').slideDown('slow');
         event.preventDefault();
       });
</code></pre>

<p><strong>EDIT:</strong>
From All your replies, I've done this:</p>

<pre><code> $(document).ready(function(){
   $('#right').hide();
   $('#main-content').width(600);

   $('#show-stats').toggle(function() {
         $('#main-content').width(800);
         $(this).text($(this).text() == 'Show' ? 'Hide' : 'Show');
         $('#right').show('slow').slideDown('slow').fadeIn('slow');
         event.preventDefault();

    }, function() {
         $('#main-content').width(600);
         $(this).text($(this).text() == 'Hide' ? 'Show' : 'Hide');
         $('#right').hide('slow').slideUp('slow').fadeOut('slow'); // change the text
         event.preventDefault();
});



 });
</code></pre>

<p>Will this break the internet? Is there a more elegant way or is this fine?</p>
