Show or hide field data using java script in node

Question

I create one cck content type and add one text field in them with name of:
My friend name: text field with add more button
Then, i submit form with entering my 15 friends names
Like this:
1
2
3
.
.
.
15
this node display all of 15 names,

i am trying to do after submit form display only 10 name and after 10 name display more link after click more button show remaining 5 names.
Like this:
1
2
3
4
5
6
7
8
9
10 more...
Remaining 5 names
11
12
13
14
15
how can i do this ? i am using Drupal 6

Answer 1

Replace .field-field-friends-name with your field name and adjust hide_after as necessary. This worked for me on my site

Drupal.behaviors.hide_more_friends = function() {
  var field = jQuery('.field-field-friends-name');
  var hide_after = 10;
  var items = field.find('.field-item');

  if (items.length > hide_after) {
    items.slice(hide_after).addClass('excess').hide();

    var more_link = jQuery('<a href="#">more</a>').click(function() {
      jQuery(this).remove();
      field.find('.excess').show();
      return false;
    });
    field.find('.field-items').after(more_link);
  }
}

Answer 2

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 > 0 && !$('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 > settings.limit;
    }).each(function() {
      $('<a href="#" class="facetapi-limit-link"></a>').text(Drupal.t('Show more')).click(function() {
        if ($(this).prev().find('li:hidden').length > 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));
    });
  }
}

Answer 3

Extended code with more or less link

  Drupal.behaviors.hide_more_friends = function() {
  var field = jQuery('.field-field-test');
  var hide_after = 10;
  var items = field.find('.field-item');

  if (items.length > hide_after) {
    items.slice(hide_after).addClass('excess').hide();
    console.log('hide after'+hide_after);
    console.log('item last'+items.length);
    items.slice(hide_after).addClass('excess').hide();
    items.slice(items.length-1).addClass('last');

    var more_link = jQuery('<a href="#" class="more-link">more</a>').click(function() {
      jQuery(this).hide();
      field.find('.excess').show();
      jQuery('.less-link').show();
      return false;
    });
        var less_link = jQuery('<a href="#" class="less-link excess">less</a>').click(function() {
      jQuery(this).hide();
      field.find('.excess').hide();
      jQuery('.more-link').show();
      return false;
    });
    field.find('.field-items').after(more_link);
    field.find('.field-item.last').after(less_link);
    jQuery('.less-link').hide();
  }

}