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.

So, What's a Style Sheet?

Back when the web first started, there were tags like <font> and <u> that were used for formatting text. In 1996, CSS1 came out and slowly started to replace the old formatting tags. Now, many browsers have stopped support for these tags, making CSS the standard in the web design world.

Once you get used to the formatting, CSS is very simple to use. There are three ways to use CSS

• in a linked style sheet (external)
• a <style> tag placed in the header of a page (internal)
• an inline tag placed directly on the element it’s affecting.

Linked Style Sheets

The linked style sheet is created in the same format as the <style> tag in the header of the page, only it’s an external .css file that is pulled into the HTML page. You can load an external CSS file with the following line of text:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Basic HTML

As the Manager of Digital Media for AYSO, I work with HTML on a daily basis, so it comes very second nature to me. I know this is not the case with the majority of the world, which I often realize by the strange looks people give me when I start talking “code.” Therefore, I thought it would be beneficial to a lot of you if I did an entry on basic HTML.

Whether you know it or not, you probably come into contact with it at some point while editing/updating your Region’s website. It can sometimes look like a foreign language, so it’s important to know what’s what. Here are some common tags you might come across while editing your website.

A quick note before we start: Most tags have two parts: the opening part and the closing part. The opening part starts a certain element style. Everything that comes after the opening tag will contain that style. The closing part comes at the end of the element and stops that particular style from appearing. Note the paragraph example below and how the <p> opens the style and the </p> closes the style. A slash before the letter indicates a closing tag.