I have a website with dynamically generated content. I have broken it down so that for each park there are maps, directions, etc. I have successfully gotten it to generate the way I want, and to use slidetoggle to hide and show the information. However, when you open a category, the content jumps around on the page, making everything very confusing. Here is the code:
Code:
<?php

foreach ($datas as $name)
{

	if ($name['state'] === 'PA') 
	{
                echo
		'<input type="hidden" name="id" value="' . $name['id'] . '" />' .
		'<h1 id="name">' . htmlentities($name['name']) . '</h1>' .
		'<p id="descriptionlist">' .
		htmlentities($name['description']) . ' ' .
		'<br />' .
		'<ul id="link">' .
		'<li class="l1">' .
		'<a href="' . $name['site'] . '"target="_blank">' . $name['sname'] . '</a>' .
		'</li>' .
		'</ul>' .							
		'</p>' .

'<h2 class="loc">Location</h2>' .
'<div class="loct">' .
	'<img id="'.$name['id'].'" src="maps/'.$name['id'].'state.gif"/>' .
	'<br />' .
        htmlentities($name['street']) .
	'<br />' .
	htmlentities($name['city']) . ', ' .
	htmlentities($name['state']) . ' ' .
	htmlentities($name['zip']) . ' ' .
	'<br>' .
	htmlentities($name['phone']) . 
	'<br>' . '<br>' .
'</div>' .


'<h2 class="map">Trail Map</h2>' .
'<div class = "mapt">' . 
	'<div id="mapDiv">' .
	'<h3 id="trailimg">Trail Map</h3>
	<img id="'.$name['id'].'" src="maps/'.$name['id'].'.gif"/>' . '<br>' . '<br>' . '</div>' .
'</div>' .

'<h2 class = "pho">Photos</h2>' .
'<div class = "phot">' .
	'<div id="photoDiv">' .
	'<p>Submit <i>your</i> photos of ' . htmlentities($name['name']) . 'through our <ul id = "link"><li><a href="https://www.facebook.com/Ride4Wheel">Facebook Page!</li></ul></a></h3><p> Or go to our Contact Us page for information on how to e-mail us your favorite pictures!</p>' .
	'</div>' .
'</div>' .

'<h2 class="vid">Videos</h2>' .
'<div class="vidt">' .			
	'<p>Submit <i>your</i> videos of ' . htmlentities($name['name']) . 'through our <ul id = "link"><li><a href="https://www.facebook.com/Ride4Wheel">Facebook Page!</li></ul></a></h3><p> Or go to our Contact Us page for information on how to e-mail us your favorite videos!</p>' .
'</div>' .
			
'<h2 class="com">Comments</h2>' .
'<div class="comt">' .
	'<p id="commentlist"><FONT COLOR="#1e3153">' .
	($name['comment']) . '<br><small>  ~' .  
	($name['commentname']) . '</small></FONT><br></p>' .
	'<h3>Let us know what you think<br>of ' . htmlentities($name['name']) . '</h3>' .
'</div>' .

'<h2 class="eve">Events</h2>' .
'<div class="evet">' .
	'<h3>Check out these great events happening at ' . $name['name'] . '</h2><br>' . $name['event'] . '<br>' .$name['date'] . '<br>' . $name['description2'] . '</h2>' .
'</div>';
}}

?>
</div>
</body>
and

Code:
$(document).ready(function(){
$('.loct, .mapt, .phot, .vidt, .comt, .evet').hide()
});



$(document).ready(function(){
$('.loc').css('width: 800px');
$('.loc').click(function(){
$('.loct').animate(
{'height':'toggle'},
'slow', 'swing'); 
});
});



$(document).ready(function(){
$('.map').click(function(){
$('.mapt').toggle()
});
});

$(document).ready(function(){
$('.pho').click(function(){
$('.phot').toggle()
});
});

$(document).ready(function(){
$('.vid').click(function(){
$('.vidt').toggle()
});
});

$(document).ready(function(){
$('.com').click(function(){
$('.comt').toggle()
});
});

$(document).ready(function(){
$('.eve').click(function(){
$('.evet').toggle()
});
});
To see the results, go to www.ride4wheel.com/new_ma.php

What I want is for the map or whatever you are clicking to slide open and closed without the entire page flying around. BTW the design elements of the site are not done: I know it's really ugly. That's for later.

I'd appreciate any help.