Simple Toggle with CSS & jQuery

I know there are a lot of toggle tutorials out there already, but when I was learning the basics of jQuery and the toggle effect, I had a hard time finding resources on how to switch the "open" and "close" graphic state.

After reading a few tutorials and mix and matching techniques I was able to achieve this effect, but wanted to share it with those who experienced the same frustration that I had gone through.

We start out with an h2 tag with a link as the "trigger" for our effect. Below our h2, we will have our container where we hold the content. Note that we nest the container within another div. One of the main reasons I decided to do this was to prevent the padding from easing up and down during its action. Take a look here for a bad example of a toggle.

Write a Reply or Comment

Your email address will not be published.