Need to put a link before a counter element

HTML & CSS
1

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:

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. :slight_smile:

2

You’ll need to add some javascript to do what you want.

Here’s a basic example you can look at - there’s some styling issues, but the basic behavior is right.

http://www.snyderplace.com/demos/collapsible.html

3

Thanks - but the javascript isn’t the part I’m concerned with right now. I’m trying to figure out how to put open/close toggle links in where I want them - small little icons or text (maybe just a +) beside the capital letters that are being generated by the CSS.

4

Maybe I should clarify - I want the icons BEFORE the capital letter (i.e., to the left of it), not after. I’m not worried about how to add the javascript to the link - I just don’t know how to put the link itself (image, a tag, whatever) to the left of the generated content. It’s like I need a “before” the “before” - and the ‘before the before’ is going to need some javascript added, maybe hold an image, etc. Is there any way to do this?

5

have you used your ‘:after’ element yet? you could use the :after and position:absolute; to move the icon into place.

hope that helps

6

Now THAT might work! Can I include code with the generated CSS? Like if I want to put something like this in the :after element? Is there a way to do that?

<img src="_images/icons/show.png" class="noDisplay" onclick="showHidesection(this, 'show', 'sec_1')" alt="Hide this section" />
7

Or maybe just put it in the HTML after the element and use absolute positioning. I was so sure this was hard that I hadn’t considered straightforward answers. : )

But I’d still like to know if it’s possible with content generation just out of curiosity - that’s cool stuff.

8

Now THAT might work! Can I include code with the generated CSS? Like if I want to put something like this in the :after element? Is there a way to do that?

Afraid not. You cant use : pseudo-elemnts with .js, they don’t have an on click event.

If you had hard coded image tag, as in that last snippet yes you can position it anyway you want with AP. But if you do that

#1 the image will become part of the content and not the style.
#2 I question how semantic your mark up would be as the only tag that can go DIRECTLY inside a UL/OL is LI

but if you were going to use .js for this why not have the .js generate an element before the text node with a pre attached onclick event?

9

why not have the .js generate an element before the text node with a pre attached onclick event?

Because I didn’t know that was possible. : )

I’m the CSS and HTML person. I’ll talk to the Javascript guys. That may be the best solution.

10