Question

Take a look at this fiddle

Can anyone explain why:

a. The numbers in the ordered list do not appear until the animation is complete. Causing it to jerk when the numbers pop in.

b. After closing the accordion for the first time, the numbers do not return.

When toggling the header, the css for the .sublinks switches once from Visible to Hidden, then never changes back.

Answer 1

* EDIT *

I fixed it! Check out this jsFiddle: http://jsfiddle.net/QtQjx/

* END EDIT *

You have conflicting padding for your .sublinks class in your CSS.

Here is the relevant CSS:

.sublinks {
    display:none;
    list-style-type:none;
    padding:10px 0 20px 55px;
}

.sublinks {
    padding:0;
}

On the one hand you’re telling it to give the .sublinks list padding:10px 0 20px 55px and on
the other hand you’re telling it to give it no padding at all. Get rid of the second .sublinks and
change the padding of your first .sublinks to 10px 0px 20px 0px.

Also, inspecting the drop down when the numbers have disappeared, I noticed that it updates top-level
OL code to the following:

<ol class="loweralpha sublinks" style="display: block; overflow: hidden; height: 335px; margin-top: 10px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 20px; ">

If you can find out how that is happening and eliminate the overflow:hidden, I think you’ll solve
your problem.

Cheers!