A jQuery plugin for collapsing a list down into a "+ X more" format.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.gitignore
CHANGELOG.md
LICENSE
README.md
bower.json

README.md

jquery.plusmore

A jQuery plugin for collapsing a list down into a "+ X more" format.

Installation Via bower

bower --save install jquery-plusmore

Usage

Include jquery.plusmore.js on the page and call the plugin on your list:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="jquery.resizeandcrop.css">
	</head>
	<body>
		<ul class="plusmore">
           <li class="plusmore-item">List Item 1</li>
           <li class="plusmore-item">List Item 2</li>
           <li class="plusmore-item">List Item 3</li>
           <li class="plusmore-item">List Item 4</li>
           <li class="plusmore-item">List Item 5</li>
           <li class="plusmore-item">List Item 6</li>
           <li class="plusmore-item">List Item 7</li>
        </ul>
		<script type="text/javascript" src="jquery.plusmore.js"></script>
		<script>
			$(".plusmore").plusmore();
		</script>
	</body>
</html>

By default, the plugin will take the above DOM elements with the class plusmore-item and reduce them down to a list of the first three items followed by a link saying "+ X more". Clicking the link will un-hide the other items.

Options

You can set plugin options via a key-value object parameter:

$('.plusmore').plusmore( { itemSelector: ".list-item", show: 5 } );

Or by directly overriding them:

$.fn.plusmore.defaults.itemSelector = ".list-item";
$.fn.plusmore.defaults.show = 5;

Available Options:

Name Type Default Value Description
itemSelector string .plusmore-item jQuery selector that will find all the list elements to collapse
hiddenClass string plusmore-hidden CSS class applied to the items hidden in the list; this class should typically be set to display: none; in your CSS.
show integer 3 The number of items in the list to show before adding "+ X more"
moreItemsClass string plusmore-more-items CSS class applied to the "+ X more" list item
formatList callback Renders a "+ X more" link and sets up a click event that calls showMore Callback function that will handle collapsing the list to the visible set of items and render the " + X more" item. You attach any events for interacting with the "+ X more" item here.
showMore callback Shows the remainder of the list when the "+ X more" item is clicked Callback function to setup handling the interaction with the "+ X more" item

Events

You can trigger plusmore functionality by triggering events on the same element you ran the plugin on. So for example, let's say you did the following:

$('.plusmore').plusmore( { itemSelector: ".list-item", show: 5 } );

You can programatically cause a plusmore action by triggering one of the pre-defined events.

// This will expand your list
$('.plusmore').trigger('plusmore.showMore');

// This will collapse your list
$('.plusmore').trigger('plusmore.formatList');

Available Events:

Name Description Required Data Dependencies
plusmore.showMore Expands the list nested in the element this event is triggered on. This will apply the callback function defined in options.showMore to the context of the element with the class defined by moreItemsClass. N/A Requires the list to be already collapsed, and that an element exists on the same level as your list items, having the classname as defined by moreItemsClass.
plusmore.formatList Collapses the list nested in the element this event is triggered on. This will run the function defined in options.formatList. N/A Requires the list to be already expanded.

License

Copyright (c) 2015 Traackr Licensed under the MIT license.