Collapsing list content

If you keep up with my posts, you'll know I'm a big fan of graceful degradation when it comes to JavaScript. For me, graceful degradation means two things:

1. Happier non-javascript users
2. Happier search engines

A search engine is like a non-javascript user in many ways, as it crawls content without applying any javascript (or css) to it.

With that aside, I thought I'd toss out another method of collapsing content while adhering to rules of graceful degradation. Sometimes we find our unordered or ordered lists get a little lengthy. Instead of paginating or truncating them, you can "collapse" them with just a few lines of jQuery:

$('ul').each(function() {
    if($(this).find('li').length > 1)
        $(this).find('li:first').
              append('<span>more&hellip;</span>').
              siblings().hide();
});

$('li span').click(function() {
    $(this).parent().siblings().toggle();
});