To apply the show more component to a block of text, call the SHOWMORE module on it.

Use

var e = new SHOWMORE({
  container: $('#show-more'),
  defaultHeight: 200,
  buttonTextMore: 'Show more',
  buttonTextLess: 'Show less'
});

Options

  • container - _(required)_the outer container that has content you want to hide. The script automatically parses for .js-show-more elements
  • defaultHeight - (defaults to 200) the number of pixels the box should shrink to
  • buttonTextMore - (defaults to 'Show more') what the text on the button is before you expand the content
  • buttonTextLess - (defaults to 'Show less') what the text on the button is after the content is expanded