How do I create a table of contents in the text with some WYSIWYG?

Question

Navigation

#1 by (8 votes)

1

I would like to create a table of contents:

1 - Titulo Tal
1.1 - Subtitulo
1.1.2 - outro

2 - Outro titulo
2.1 - subtitulo
etc...

I'd like something automatic, but I have no idea where to start. Could someone give me an idea or direction for me to study and try to do?

javascript html wysiwyg

asked by anonymous 05.03.2014 / 18:32

1 answer

score 8 · Accepted Answer

With HTML like this:

<ul>
 <li>Item</li>
 <li>Item</li>
 <li>Item
<ul>
  <li>Item</li>
  <li>Item</li>
<ul>
</li>
<ul>

CSS will look like this:

ul {
    counter-reset: nomeContador;
}
li:before {
    counter-increment: nomeContador;
    content : counters(nomeContador, ".") " ";
}

And with the counter of css the result will look like this: / p>

1 Item
2 Item
3 Item
3.1 Item
3.2 Item