I have written a small code to show hide element and its working fine. What can I do to make it work on multiple instances. How can I make code for multiple instances

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.heading{ font-size:18px}
.paragraph{ font-size:12px; height:0; overflow:hidden; background-color:#CCCCCC;}
.close{ color:#FF0000; font-weight:bold;}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>
<div>
    <h1 class="heading">This is Heading</h1>
    <p class="paragraph">This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph.<br/><span class="close">Close</span> </p>
</div>
<div>
    <h1 class="heading">This is Heading</h1>
    <p class="paragraph">This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph.<br/><span class="close">Close</span> </p>
</div>

<script>
$('h1.heading').click(function(){
$clickedElement=$(this);
$('$clickedElement.paragraph').animate({'height':'50px'},1000);
})

$('.close').click(function(){
$('.paragraph').animate({'height':'0px'},1000);
})
</script>

</body>
</html>

```