Advanced jQuery Read More

Ver. 1.1

A small but versatile jQuery plugin that allows you to truncate specific sections of your content and then creates a link to toggle the full content.

Released under the GNU General Public License (GPL)

Options

linking - default: trueNew!
Defines whether and when a "read more" link should be created. There are three options:

true - The content will be truncated and a "read more / "read less" link will be appended.
false - The content will be truncated only without a means to toggle the full content.
'open only' - The content will be truncated and a "read more" link will be appended to toggle the full content. Once expanded, the content cannot be truncated again.

showLines - default: 8
Sets the number of text lines to display before the text gets truncated and the "read more" link shows up. Text that has less lines than defined with this setting will not have the "read more" link.

In other words, if the default settings are used, any text longer than 8 lines will be cut off after the eigth line.
Note: In order for this setting to take full effect, the section should not start with a headline, since the line-height used for the calculation is taken from the container's first child element. This will be optimized in a later version.

showParagraph - default: false
If set to true, the first paragraph (<p>) of each tracked section will be visible in the preview instead of a number of lines.

This option overwrites showLines and the data-lines attribute.

linkCaption - default: 'read more'
Changing this option allows you to change the text of the toggle-link.

linkCloseCaption - default: 'read less'
Changing this option allows you to change the text of the toggle-link while the full content is visible.

linkHint - default: 'Click to see full article'
This option sets the title-attribute (i.e. the mouseover hint) of the "read more" link.

animationSpeed - default: 800
This option controls the duration in milliseconds of the animation when a "Read More" text is toggled. The higher this value, the slower the animation.
Set this to 0 to toggle without an animation.

previewTextOnly - default: true
Usually, whenever a section gets truncated, only text lines will be visible within the previewed block. By setting this option to false all elements including images tables etc. will be previewed but may get cut off.

Setup

1. Include the advanced-read-more.min.css in the head:

                        <link
                        href="css/advanced-read-more.min.css"
                        rel="stylesheet"
                         />
                    

2. Include jQuery followed by advanced-read-more.min.js in the head:

                        <script
                        src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

                        <script
                        src="js/advanced-read-more.min.js"></script>
                    

3. Initialize the plugin below the included scripts:

<script>
                                $('body').readMore();
                        
</script>

Or with custom options (the options below are used in this ReadMe's Demo):

<script>
                                $('body').readMore({

                                    showLines: 5,

                                    linkCaption: 'expand...',

                                    linkCloseCaption: 'reduce...',

                                    linkHint: 'Click for more information'

                                });
                        
</script>

In order for the plugin to effect any sections, you need to add the class "jrm-truncate" to them:

                        <div
                        class="jrm-truncate">

                            <!-- insert content here -->

                        </div>

If you want to define a number of preview lines to any section that differs from the one you set in the options, you can use the data-lines attribute. This will overwrite the value of the showLines option:
See Demo 2.

                        <div
                        class="jrm-truncate"
                        data-lines="10">

                            <!-- insert content here -->

                        </div>
                    

If you want a certain section's preview to contain it's whole first paragraph (<p>) no matter how many lines it has, you can set the data-lines attribute to "-1". This will ignore the showLines option for that section:

                        <div
                        class="jrm-truncate"
                        data-lines="-1">

                            <!-- insert content here -->

                        </div>
                    

If you want a specific section to have no toggle link, have a toggle link or only have a toggle link until it's clicked, you can use the data-linking attribute. The possibilities match the linking option:
See Demo 2 for data-linking="open only".

                        <div
                        class="jrm-truncate"
                        data-linking="true">

                            <!-- insert content here -->

                        </div>

                        <div
                        class="jrm-truncate"
                        data-linking="false">

                            <!-- insert content here -->

                        </div>

                        <div
                        class="jrm-truncate"
                        data-linking="open only">

                            <!-- insert content here -->

                        </div>
                    

If you want a specific section's toggle link to have a different caption, you can use the data-link-caption and data-link-closecaption attributes. This will overwrite the value of the linkCaption and linkCloseCaption options:
See Demo 2.

                        <div
                        class="jrm-truncate"
                        data-link-caption="continue..."
                        data-link-closecaption="done">

                            <!-- insert content here -->

                        </div>
                    

You can also set the duration of the animation individually for each section by using the data-duration attribute:
See Demo 2.

                        <div
                        class="jrm-truncate"
                        data-duration="0">

                            <!-- insert content here -->

                        </div>
                    

Demo 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Demo 2 (using different data-attributes)

Update history

Version 1.1

Fixes:

Removed a misplaced placeholder item.
In order for the line-height to be calculated correctly in all browsers (AjRM v1.0.1), a placeholder element was created within each section but wasn't correctly removed afterwards, resulting in a superfluous empty line of text.

New Features:

Added option linking.
It is now possible to control whether the "read more" and/or "read less" links should be created.

Added several data-attributes.
The options linking and animationSpeed can now individually be overwritten by adding the data-linking and data-duration attributes to the sections.

Version 1.0.1

Fixes:

Changed the way the line-height is calculated because it wasn't working in most browsers.
Most browsers didn't return a value for the line-height but 'NaN' if no line-height was specified (i.e. automatic values). Becuase of this, the whole script didn't work in Chrome, Edge, Opera and possibly others.

Miscellaneous

If you're interested in my other plugins, like the scroll progress tracker used in this ReadMe, feel free to download them from GitHub or JSClasses.org.

Questions & Feedback

If you have any questions, notice any bugs, have issues getting the plugin to work, have an idea for a cool feature to be added, or would like to leave any other kind of feedback, feel free to contact me under David@Whitworth.de

Also, please, feel free to send me links to websites where you used this! ☺