Toggle Your Content in a Snap!

A common conundrum for web designers is how to make a lot of content easily accessible for their viewing audience. It’s difficult to navigate through a really long page with a bunch of jump links.

Here’s a clean and easy way to neatly organize your content so that it’s easy to navigate. We use the toggle method throughout the AYSO National website. If you’ve ever looked at one of the FAQ pages or the new Section Meeting microsite, I’m sure you’ve seen it!

jQuery Toggle Method

Let's use a FAQ example. You have a question with an associated answer. We only want to show the answer when you click on the question. With this method, clicking a second time on the question will hide the answer.

QUESTION: Where is the soccer field?

ANSWER: Down the street and around the corner.