I have lots of lists on my new site that we want to show ‘only the first 5’ items on, but allow people to expand to see them all if they want. It’s common enough that I’d like to have an easy way to do it. Bonus points if it’s non-obtrusive.

1
2
3
4
5
6
7

jQuery ->
  $('ul.show-more').each ->
    if $(this).find('li').length > 5
      $(this).find('li:gt(4)').hide().end().append(
        $('<li><a href="#">Show More...</a></li>').click ->
          $(this).siblings(':hidden').show().end().remove()
        )

Now all I have to do is drop into my favorite haml template and bang out a list

1
2
3

%ul.show-more
  - items.each do |item|
    %li= item

And as long as I’m using the show-more class, I get it for free. Beautiful.