Hide items ... and show a button for showing more of them
Download View project on GithubUsing 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>
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 |
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? |
Name | Description |
---|---|
on | Start hiding elements |
off | End hiding elements. Show all elements again |
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.
You can do the same as above but using an unordered list <ul>
JS
jQuery.js Stashy.ShowMeMore.js