https://github.com/tinacious/shrinklist
The shrinkList.js plugin does just that, shrinks lists.
https://github.com/tinacious/shrinklist
expand jquery toggle
Last synced: 24 days ago
JSON representation
The shrinkList.js plugin does just that, shrinks lists.
- Host: GitHub
- URL: https://github.com/tinacious/shrinklist
- Owner: tinacious
- Created: 2013-11-12T18:12:47.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2019-07-07T02:44:55.000Z (almost 7 years ago)
- Last Synced: 2025-03-15T03:41:13.402Z (about 1 year ago)
- Topics: expand, jquery, toggle
- Language: JavaScript
- Homepage:
- Size: 4.88 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# shrinkList jQuery plugin
by [Tinacious Design](http://tinaciousdesign.com)
The shrinkList.js plugin does just that, shrinks lists.
This plugin allows you to take a long unordered or ordered list with, for example, 10 items, but only show 5 initially, and create a link for you to show the remaining list items.
View the demo [here](http://tinacious.github.io/shrinkList/).
## Customization
You can customize the following:
1. Amount of items to show initially
2. Speed of the animation in milliseconds
3. Text string that will be clickable to show the rest of the list items
## Implementation
### Include the plugin
Source the plugin file `shrinkList.js` or `shrinkList.min.js`
### Set up your HTML
```html
- List item
- List item
- List item
- List item
- List item
- List item
```
### Call the plugin on document.ready or window.load
```js
$('#my_list').shirnkList({
filterText: 'Show all filters',
filterSpeed: 250,
maxFilters: 3 // default: 10
});
```
### See the Results
Your rendered HTML should look something like this:
```
List item
List item
List item
...
Show all filters
```
[](https://bitdeli.com/free "Bitdeli Badge")