JS Show More

Overview

The JS Show More module is used to limit the visible height of a content element until the user clicks a button. Typically, the button may say "Read More", "Show More", "See More", etc.

Specifically, any element given the class js-show-more will be limited to a specific height (default is 100px) and will have a "show more" button appended to it. When the button is clicked, the element will animate to its natural height, and the button will animate out and be removed.

Notes:

  • Truncation will not occur if the element's height falls below the height threshold.

Examples

Basic

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.