How do I truncate a long unordered list with Jquery?

[admin]

I am using wordpress to display a list of categories, sorted alphabetically. I want to use jQuery to append a "read more" link after the first 20 links. When the user clicks "read more" the rest of the categories slide down/appear. The HTML format of the list is below:

<ul id="catA">
    <h2>Categories</h2>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    <li class="cat-item">
        <a title="title" href="#">Category Name</a>
    </li>
    ...
</ul>

I want the

<a href="#">view all categories</a>

to be appended to the list after the 20rh category, and hiding everything after that. Before I attempt to write some code, any thoughts on the best way to go about this?