Question

I have an ordered list, such that some list items <li> are, by default hidden via css. These can be revealed (via JavaScript) depending on user behaviour however.

If they are revealed the entire list reorders so that they are in sequence, while when they were hidden the list had no breaks in sequence.

I would like each element of the list (even the ones that start hidden) to have fixed number in the list, even if this means that on page load the list will have gaps (1. 2. 4. 5. etc)

In this case the list would only appear an unbroken list of elements by number, if all elements were revealed.

Here is a jsfiddle illustrating my problem
http://jsfiddle.net/hesxT/1/

Any thoughts would be appreciated

Answer 1

http://jsfiddle.net/hesxT/6/

use…

visibility: hidden;
height: 0;

to hide the item. Then remove those properties to make the item visible.

and, as others have pointed out, remove the <div> wrapping the <li>, it’s not needed.