I just stumbled on this while looking for something else. I’m sure you figured things out or decided to do something else, but in case anyone else comes here and would like to use your fiddle, the reason the links are varied widths in the beginning is because
<span> elements are inline by default, and therefore can’t have widths. If you add
display: inline-block to the
span rule, they’ll respect your width setting on the initial load.
As for why the widths are fine after the first collapse, it looks like jquery is actually applying the same display property to the span when it does the animation. (Check the inspector while clicking the collapse button, and you’ll see it get added.) I imagine they do this to inline elements to avoid the exact issue you were having.