How to minimize the expand text on the site. The script.

I welcome you on the pages of our website. In today's article, we will talk about the ability to collapse (hide) the text on the site, and when clicking on the link to show the full text.

Very often to save space on the site, or just for a more presentable view, you only need to show the user a portion of the text, that is, minimize the expand text. I use this especially often when developing an online store in categories, that is, if you need to write a category collapse a large text and deploy it with a click, show a complete description, then this article is exactly what you need.

After reading this article, you will already know how to hide part of the text on the site and click on the link to show the full text. I think you also faced the problem when a lot of text should be hidden but at the same time give the user the opportunity to read more, this article will help you understand the main principle of how to hide the text in readmore.

The script hiding the big text, very useful function and sometimes even necessary, on this we today and we will consider the option of creating a script that will collapse the text if it exceeds the specified height in the settings. That is, if your text will have a block height greater than you set in the settings, then a link will appear when clicking on which the full text of the description will unfold, in case your text does not reach the specified altitude, this link will not appear.

And so, the script "hidden text under the spoiler" and an example of its work you can download and see below under this article, and in the article itself we will look at some of its functions and settings.

The function of the simplest script call looks like this:

To call the script to collapse, expand the text with its additional settings as follows:

This script has additional settings that you can apply to it, consider them:

speed: 100 (The speed of the unfolding of the text is indicated in milliseconds)
maxHeight: 200 (The maximum block height is indicated in pixels)
heightMargin: 16 (specify in pixels, allows avoiding the breaking of blocks, if they are not much larger than the height - maxHeight)
moreLink: '<a href="#">Expand text</a>'
lessLink: '<a href="#">Collapse text</a>'
embedCSS: true (allows you to add dynamic CSS styles, if the styles you connect in your styles file set to false)
sectionCSS: 'display: block; width: 100%;' (This value sets the block style)
startOpen: false (by default the block is hidden, if true - the text will be immediately expanded, but it will be possible to hide it)
expandedClass: 'readmore-js-expanded' (class css which is added to the expanded block.)
collapsedClass: 'readmore-js-collapsed' (class css which is added to the collapsed block)
beforeToggle: function() {} ( function that is called after clicking the "Expand text" or "Minimize text" button, but before the block collapses or unfolds.)
afterToggle: function() {} ( function that is called after the block is expanded or collapsed.)

If the element has the maximum height specified in the css styles, in this case they will be used, the maxHeight value will be ignored.

Callback function:

Script callback functions, beforeToggle() и afterToggle() have the same arguments: trigger, element и more.

Example callback function:

The disabling of some functional of this script is used approximately like this:

Or, specify the desired element with which the script should not work.

This script by default adds its css styles to the page:

Using the script settings, the first rule can be changed:

In order to use your styles in the css file in the settings you need to specify the value false:

To see a live example or download a script, you can visit our website: