scrolling - How to handle very long accordions?

I have condensed a rather long list of items into an accordion so that only the titles are initially visible and the accordion expands to show the details. The list contains the main content of the page, not navigation.

I think this works well because users will be looking for the heading that applies to them, and there is no reason for them to care about the details of the other ones, so hiding it works well, and allows them to find the one they need sooner.

Here is an example of the type of interface I'm talking about. Difference is on mine only one can be open at a time, they animate open and closed, and some [really only one] of the content sections on mine are pretty tall)

The tricky thing is there are some categories with 25+ items, and when there is an item near the bottom with significantly more content than the currently opened one (or even worse when none are open), when opened it just extends most of its content off the bottom of the page.

My question is twofold:

1. 
   

   Is it in general a bad or questionable decision to have an accordion with many many options that requires scrolling to see all of? (I don't think so, but not sure if it threatens the pattern)

   
   


2. 
   

   How to handle opening accordion sections with lots of content that are near the bottom of a page (this accordion has varying height internal sections). My initial idea would be to scroll the page up so that the clicked section moves up to the top of the viewport, showing as much of the opened section as it can but not going off the top. I just worry that this might feel twitchy or strange to the user.

   
   

Answer

When to use an accordion

What problem does an accordion solve? It solves the problem of not having enough space to show all items, so instead, you collapse all but one of them and allow the user to toggle between them. The downside is that the toggle controls are dependent on the length of the contained content. In your case, it sounds like the contained content may make an accordion impractical.

Here's what UI-patterns.com has to say about the accordion pattern:

Usage

• Use when you want the benefits of a normal sidebar menu, but do not have the space to list all options.


• Use when there are more than 2 main sections on a website each with 2 or more subsections.



• Use when you have less than 10 main sections


• Use when you only have two levels to show in the main navigation.

Some of those numbers seem a bit arbitrary, but they're good rules of thumb to follow. Essentially what they indicate is that if you have too much data, you may not want the accordion pattern.

Alternatives

UI-patterns.com actually offers a compelling alternative, the vertical dropdown menu. It's a good approach for your situation because it opens up a lot of vertical space for longer lists of items (since the list will appear on top of other content). If you need to fit the control into a sidebar, consider the horizontal dropdown menu on the same site.

Using an accordion anyway

If you're still forced to apply the accordion pattern, consider the accordion on the right hand menu on UI-patterns.com. Some of the headings there contain around 25 items, and even though the bottom headings disappear from view when you're looking at it, it's not confusing. That's because the accordion animates its transition from its open to its closed state. This is important because it tells the user what is happening to the headings as they click on them. If they were to just jump open and shut, the headings would be gone and it may be unclear where they went. So if you implement an accordion anyway, consider using an animation to make the transition extra clear.