Accessible Accordions

Here is a simple accordion setup. The initial page loads with just a series of headings and accompanying text - all within a containing <div>. Some jquery routines add in the various ARIA and other attributes required, and control the functionality of the accordion.

See the article that explains how it works, and how it is put together.

How do I get your newsletters?

Simply fill out our membership form and you'll start getting the newsletters straight away.

Can I control the frequency?

When you sign up you can select the frequency of the newsletters.

How do I unsubscribe?

Each newsletter has an unsubscribe link at the bottom.

Just click on the unsubscribe link and we'll remove you from our list.

Here is some content outside the accordion container.

There's even another heading

This content shouldn't become part of the accordion setup because it's outside the accordion container.