JQuery container manipulation

[free-xbox]

First off I'm not 100% sure how to title this page so please edit if you can.So I'm Learning so jQuery, I want a system that has a number of articles on a page, when the page is first loaded i want the first article to be displayed and all other articles to be reduced to either their heading text or a set height.Now I have a system that will open and close the containers, it looks like that:\[code\]<script type="text/javascript"> jQuery(document).ready(function() { jQuery(".content").hide(); //toggle the component with class msg_body jQuery(".heading").click(function() { jQuery(this).next(".content").slideToggle(500); }); });</script>\[/code\]my Mark up is this:\[code\]<div class="page_content"> <h1 align="center">Updates</h1> <article class="update_article"> <h2 class="heading">13/12/2012 - Article Heading</h2> <div class="content"> Article Body </div> </article> <article class="update_article"> <h2 class="heading">13/12/2012 - Article Heading</h2> <div class="content"> Article Body </div> </article></div> \[/code\]When this runs, all articles will be reduced to just their headings, once they have been clicked jQuery will open the body.So I want to know how I would go about firstly opening the first article when the page is loaded, but I would also like for the system to close the open article when a different one is clicked and opened.Thanks for you help and any tutorials or reading information for this subject is very welcome.