load part of the page

Question

hi

i have 2 pages one is the main and the other is the sub-main

main,html :

<A href="sub-main.html#post5>go and load just post 5</a>

sub-main.html :

<DIV class=posttop id="post4">
here you can write anything ;)
</div>

<DIV class=posttop id="post5">
here you can write anything ;)
</div>



<link type="text/css" href="post.css" rel="Stylesheet" />   
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>


<script type="text/javascript">
$(document).ready(function(){})
{

         $(location.hash).addClass("selectpost")

}
</script>

post.css:

div.selectpost {

padding: 20px;
background:red;
font-weight: bold;font-size: 10pt;

}

div.posttop {

padding: 20px;
background: #cde4e9;
font-weight: bold;font-size: 10pt;}

as shown up the code will first load everything in the sub-main.html page then after Finnish loading will reference to the specific post "post5" and selected of highlighted but if the numbers of the post lets say 20 posts inside the sub-main.html it's will take to load forever . what i want to is when i click the link in main.html to go to the post5 in the other page how can i load just the div element of the "post5" and the rest give the user the option to load it if he wish to see the whole posts ,i try to search in Google but no luck

and thanks guys for the help :)