I'm creating a large index of an online manual and am using CSS counters to put the whole thing in an outline kind of format. That part is working great. The design/UI issue at this point is that the index is so long that it's unwieldy - not at all easy to find what you're looking for. What I'd like is to be able to have some of the inner sections of the outline closed so the user can open them if they need to see the details of that area.

A screen shot of just a bit of the index is here: cssCounterExample.png

It goes on and on after that - which is the issue. I was thinking maybe keep the first and second level elements open (the Roman numerals and the capital letters) but close everything else. Ideally, it seems like the link to allow the user to open closed sections should be to the left of those capital letters that have child items - but I don't have a clue how to put them there since the capital letter is generated content. Is there a way to do that? Or alternatively, does anyone see a better way to do this?

I've created a fiddle for this - didn't include most of the styles, just the ones pertaining to the counters: http://jsfiddle.net/Bn7De/1/

So in the fiddle, what I'm looking for is a way to put a link before the two parts that say "A. Your Clients' Charts" so that we can close those sections. Or your other ideas for how to solve the issue.