0

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

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);
  }
}
| improve this answer | |
  • how can i add this currently i am not using any theme use default theme i can apply this in my node.tpl or page .tpl? – Zaid Nov 18 '11 at 16:24
  • You can put it in page.tpl.php. Wrap it in <script></script> and put it after <?php print $closure; ?> – rocketeerbkw Nov 18 '11 at 21:27
  • it's work perfectly Thank You so much :) only one more if i have 10 content types and each content type have more then 20 fields how can i apply this in all content types? – Zaid Nov 19 '11 at 5:35
  • and its permanently show if i click more link,any less link after show all data include? – Zaid Nov 19 '11 at 5:49
  • If you use existing fields, this will work on all fields regardless of content type. If you have more than one field per content type, you will need to adjust the code to loop over each field. The example you provided didn't have less link so I didn't include it. – rocketeerbkw Nov 19 '11 at 7:33
1

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));
    });
  }
}
| improve this answer | |
0

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();
  }

}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.