Show or hide field data using java script in node
jQuery will do this for you, but you wiull probably have to either write your own code for list items > 10, or adapt existing code to suit your needs. 

There are various show/hide plug ins for jquery. In Drupal the facet api uses a jquery function to do just that as well given it's limit.

Here is the function from facetapi.js

/**
 * Applies the soft limit to facets in the block realm.
 */
Drupal.facetapi.applyLimit = function(settings) {
  if (settings.limit &gt; 0 &amp;&amp; !$('ul#' + settings.id).hasClass('facetapi-processed')) {
    // Only process this code once per page load.
    $('ul#' + settings.id).addClass('facetapi-processed');

    // Ensures our limit is zero-based, hides facets over the limit.
    var limit = settings.limit - 1;
    $('ul#' + settings.id).find('li:gt(' + limit + ')').hide();

    // Adds "Show more" / "Show fewer" links as appropriate.
    $('ul#' + settings.id).filter(function() {
      return $(this).find('li').length &gt; settings.limit;
    }).each(function() {
      $('&lt;a href="#" class="facetapi-limit-link"&gt;&lt;/a&gt;').text(Drupal.t('Show more')).click(function() {
        if ($(this).prev().find('li:hidden').length &gt; 0) {
          $(this).prev().find('li:gt(' + limit + ')').slideDown();
          $(this).text(Drupal.t('Show fewer'));
        }
        else {
          $(this).prev().find('li:gt(' + limit + ')').slideUp();
          $(this).text(Drupal.t('Show more'));
        }
        return false;
      }).insertAfter($(this));
    });
  }
}