One Show Hide – jQuery Plugin
One Show Hide is a jQuery Plugin which will hide list items and add a show/hide link which toggles the visibility. This plugin helps to solve the issue when you have a really long list, but only want to show the first 10-15 items, and hide the rest. And give the user the option to see the hidden items by clicking a link.
Installation:
- Add latest jQuery include at the top of your page.
- Download jquery.oneshowhide (139) and include in your page after jQuery library include.
How to use:
If you would like to just use the plugin with the default options, just call the plugin with the .class or #id of the list which you would like to target.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.oneshowhide.js"></script>
<ul class="port-box">
<li>Test 1.</li>
<li>Test 2.</li>
<li>Test 3.</li>
<li>Test 4.</li>
<li>Test 5.</li>
<li>Test 6.</li>
<li>Test 7.</li>
<li>Test 8.</li>
<li>Test 9.</li>
<li>Test 432.</li>
<li>Test 23.</li>
<li>Test 0232.</li>
<li>Test 2002.</li>
<li>Test 541.</li>
<li>Test 5432.</li>
<li>Test 542.</li>
<li>Test 542.</li>
<li>Test 342.</li>
<li>Test 452.</li>
<li>Test 42.</li>
<li>Test 542.</li>
<li>Test 4542.</li>
<li>Test 432.</li>
<li>Test 23.</li>
<li>Test 0232.</li>
<li>Test 2002.</li>
</ul>
Default
$(document).ready(function () {
$('.port-box').oneShowHide();
});
Set Number Shown to 5
$(document).ready(function () {
$('.port-box').oneShowHide({numShown:5});
});
Change Show/Hide Text
$(document).ready(function () {
$('.port-box').oneShowHide({showText : 'Show More', hideText : 'Show Less' });
});
