I need a nested list with subitem numbering, like this:
1. Item 1
1.1 - Subitem 1
1.2 - Subitem 2
1.3 - Subitem 3
1.4 - Subitem 4
1.5 - Subitem 5
2. Item 2
2.1 - Subitem 1
2.2 - Subitem 2
2.3 - Subitem 3
2.4 - Subitem 4
2.5 - Subitem 5
Well, I know I cannot achieve that with pure HTML. It would be great to use something like this and have the sublist automatically numbered:
<ol>
<li>
Item 1
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
<li>Subitem 5</li>
</ol>
</li>
<li>
Item 2
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
<li>Subitem 5</li>
</ol>
</li>
</ol>
Is there a solution for this using JavaScript or jQuery or something?
Neither js nor jquery but CSS:
More here: http://www.w3.org/TR/WCAG10-CSS-TECHS/#lists
You can use CSS to do so:
But it requires support for
counter
andcounters
.Edit Here’s a jQuery approach similar to dcneiner’s but with no limitation to depth:
If you want to do it cross-browser with jQuery:
And in your CSS:
This is for one level only. You could alter the code to create a recursive function for multiple levels.
This is setup to progressively enhance your page. Without Javascript it would fallback to normal nested numbering.
UPDATE: Thanks to @Gumbo work, I reworked this code into a recursive plugin. It would use the same CSS as in my previous example, but now it is a "full fledged" jQuery plugin with support for any depth:
You could then call it on a specific
#id
:Or use @Gumbo's nice selector to apply it to all
ol
tags on one page:And you can either override the defaults globally, or on an individual basis: