If you create a page with a lot of text, maybe the page will get very long and hard to read on-screen. You can shorten such a long page by only displaying some key points right away. ... Maybe the full text is of interest only to some people, for example to those who are especially keen on the topic in question. By hiding some of the text you will not bore the ones who are just flying lightly over it. For those who do open the full text, it will also prove useful to be able to collapse it and go back to where they left off.
Read More - or Less
Use plain text, not paragraphs, and a text-link for the dots. That is because you need to give them IDs - which is not so easy inside a paragraph.
The container .more-less-holder has no width limitation, but you may well give it a max-width.
If you happen to need more than one instance of this component on a site, the second downloadable file shows the changes you need to make to the IDs, the styles, the attribute and the script. There are two 'units' in the second package. The first one is identical to the first package here, the second one has got a '2' or '-2' appended to everything that needs to be changed. And for the possible 3rd instance, just swap all those '2's with '3'... and so on. The units can be moved out of the outer container, .more-less-alland placed where they are wanted.
On request we created an easier component, which uses no js. Instead it uses the 'target' pseudo element. This one also has two units that can be taken out of the holding container .container-outside and placed where needed. You just have to give the .read-wrapper different IDs. To edit the text, remove the height of the container .read-wrapper temporarily by setting it to auto. Remember to set it back when done.
Download this component (displayed)
Download this component if you need more than one of this component on the same site
The components above can be used both for 'mobile-up' and 'desktop-down'.
Download the easier Read More/Less Component for 'mobile-up'
Download the easier Read More/Less Component for 'desktop-down'
Read More - or Less
Use plain text, not paragraphs, and a text-link for the dots. That is because you need to give them IDs - which is not so easy inside a paragraph.
The container .more-less-holder has no width limitation, but you may well give it a max-width.
If you happen to need more than one instance of this component on a site, the second downloadable file shows the changes you need to make to the IDs, the styles, the attribute and the script. There are two 'units' in the second package. The first one is identical to the first package here, the second one has got a '2' or '-2' appended to everything that needs to be changed. And for the possible 3rd instance, just swap all those '2's with '3'... and so on. The units can be moved out of the outer container, .more-less-all and placed where they are wanted.
On request we created an easier component, which uses no js. Instead it uses the 'target' pseudo element. This one also has two units that can be taken out of the holding container .container-outside and placed where needed. You just have to give the .read-wrapper different IDs. To edit the text, remove the height of the container .read-wrapper temporarily by setting it to auto. Remember to set it back when done.
Download this component (displayed)
Download this component if you need more
than one of this component on the same site
The components above can be used both for
'mobile-up' and 'desktop-down'.
Download the easier Read More/Less Component
for 'mobile-up'
Download the easier Read More/Less Component
for 'desktop-down'