Jquery plugins are a joy to use, and they are surprisingly easy to write. Everyone that writes lots of Jquery code should seek to take potentially-resuable functionalities of code and put them into a nice, compact plugin. In the app I’ve been working on, we have a lot of user-generated content that we don’t limit the length on, so it can grow very large. To combat this, there is the UI pattern on the site that there is a “read more” link available to show the remaining text for the long-winded texts, while just showing a snippet otherwise. This exists everywhere, for lots of different content; hence, the “readmore” plugin was born.
So, let’s use it. If I have a bunch of answers to an online question submitted, looking like this on the page:
1 2 3
In your document ready area, you’d apply the readmore plugin:
This is going to go through your class answer div’s and apply two things:
- Abridge the shown text length (default is 500)
- Setup the “read more” click event
So, you’re dom will now look something like this (except the shown length is much less than 500 chars here):
1 2 3 4 5 6
As you can see even though the
readm-hidden class is applied to the overflow/hidden text, the plugin still gives it an explicit
display: none style so that the plugin functions for visibility toggling.
readm-more class is only used internally in the plugin for the click event.
If you want to, you can modify the defaults per-invocation:
1 2 3
It’s simple; it’s powerful; it’s jQuery. Kachow!
Download the plugin at the Github repo.