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:

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.

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:

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.