Content Jumps Around on the Page Using Slidetoggle

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:


<?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

$(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.

Your page is jumping around because your code is currently targeting every element on the page with the same class name, also your current code is far to complex for something so simple as you can chain selectors together in one query but achieve the same result. See the below for a snippet that should solve the issue you’re current experiencing, simply overwrite your current JS with the following:

This is ABSOLUTELY FANTASTIC and it gets me very close to where I want to be. As you can tell, I’m learning this on my own and I’m so very new at this.

The only problem I’m having at this point is in a case where I have:

<p class=“phot”>
Stuff
Stuff
<ul id=“link”>
stuff
</ul>
</p>

Any time I have a situation like this where there is other HTML inside of the <p></p> tags, it doesn’t get hidden. Is there a work-around for this?

The jsFiddle I setup was only an example of how you could achieve the desired result you needed, if you need multiple elements to be hidden simply wrap them inside a DIV element with the class you need E.g. phot and it will work fine. See the below if that sounds confusing.

Thanks. When I started I was pretty much on the right track with how to do the markup (probably in a version previous to what you saw). I didn’t know about bind though. That’s fantastic. I really appreciate your help. Learning on your own is so hard, and it’s people like you that make it possible to move forward.