ShowMeMore

Hide items ... and show a button for showing more of them

  Download   View project on Github

Using this component you can avoid the show long lists of items.

Instead you can display the number of them you choose, hiding the rest and showing a button "Show more".

This utility uses jQuery :gt() selector behind the scenes.

//you can use simple divs ...
<div id="yourId">
    <div class="yourClass">...</div>	
    <div class="yourClass">...</div>	
    <div class="yourClass">...</div>		
</div>

//... or you can do it with lists (ul, ol ...) for example 

<ul id="yourId">
    <li class="yourClass">...</li>	
    <li class="yourClass">...</li>	
    <li class="yourClass">...</li>		
</ul>

Constructor

Stashy.ShowMeMore(selector, options)
Parameter Type Default Description
selector string empty string CSS selector for the items collection. It can be a class, data attibuttes ...etc
options object See options Options for the showmemore instance

Options

Option Type Default Description
linkClass string empty string Provide the class or classes to style the automatically generated "Show more" button
linkText string "Show more" Text for the show me more button
howMany integer 1 How many items you want to show?

Methods

Name Description
on Start hiding elements
off End hiding elements. Show all elements again

Sample

var smm = Stashy.ShowMeMore("#id .item", {
linkClass : "myClass",
linkText : "myText",
howMany : 5
});
// Start hiding items
smm.on();
// End  hiding items
smm.off();

... or you can chain methods ...

// Start hiding items
Stashy.ShowMeMore("#id .item", {
linkClass : "myClass",
linkText : "myText",
howMany : 5
}).on();

// End  hiding items
Stashy.ShowMeMore("#id .item", {
linkClass : "myClass",
linkText : "myText",
howMany : 5
}).off();

Select how many items you want to display from the list below.

This example list is built using <div> boxes.

on off

You can do the same as above but using an unordered list <ul>

on off

JS

jQuery.js Stashy.ShowMeMore.js