Skip to content
A jquery plugin for Read more and Read less functionality
JavaScript
Branch: master
Clone or download
Mohd Farid
Mohd Farid Merge pull request #1 from vreen/master
not compatible with jQuery 1.9
Latest commit 63b8b5d Jun 27, 2013
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js Merge pull request #1 from vreen/master Jun 27, 2013
.gitignore Added gitignore Feb 16, 2013
MIT_LICENSE.txt Added MIT license Feb 16, 2013
README.md Update README.md Feb 16, 2013
index.html Added js file with some examples in index.html Feb 16, 2013
readmore-readless.jquery.json

README.md

readmore-readless

A jquery plugin for Read more and Read less functionality

Consider an HTML div like following:

<div id="readMoreReadLess">
    <ul class="item">
        <li>Item 1</li>
        <li class="details">Details of Item 1</li>
    </ul>

    <ul class="item">
        <li>Item 2</li>
        <li class="details">Details of Item 2</li>
    </ul>

    <ul class="item">
        <li>Item 3</li>
        <li class="details">Details of Item 3</li>
    </ul>
</div>

We can achieve the Read more and Read less functionality by simple code.

Usage 1: Use the plugin in default mode. There will be two items in the summary and on clicking the Read more link, all items would be displayed.

$("#readMoreReadLess").readMoreReadLess();

Usage 2: Setting the items present in the summary as 1. Only one item would appear in the summary. Use the plugin with items in summary set to 1

$("#readMoreReadLess").readMoreReadLess({
      itemInSummary: 1
});

Usage 3: Customising the Read More links with user defined text and css class.

$("#readMoreReadLess").readMoreReadLess({
        readMoreText: 'Show more items ...',
        readLessText: 'Show fewer items ...',
        readMoreClass:'button',
        readLessClass:'button'
});

options is an optional javascript object with parameters explained below.

Options

  • itemClass A class name which is present on each item. default: 'item'

  • itemInSummary The number of items that should appear in the summary view. default: 2

  • readMoreClass A class name which would be applied to Read More link. default: 'read-more'

  • readLessClass A class name which would be applied to Read less link. default: 'read-less'

  • readMoreText The text for the link representing "Read more" default: 'Read more >> '

  • readLessText The text for the link representing "Read less" default: 'Read less << '


This software is made available under the open source MIT License. © 2013

You can’t perform that action at this time.