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 [download id=”6″] 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.

[html]
<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>
[/html]

Default

[js]
$(document).ready(function () {
$(‘.port-box’).oneShowHide();
});
[/js]

Set Number Shown to 5

[js]
$(document).ready(function () {
$(‘.port-box’).oneShowHide({numShown:5});
});
[/js]

Change Show/Hide Text

[js]
$(document).ready(function () {
$(‘.port-box’).oneShowHide({showText : ‘Show More’, hideText : ‘Show Less’ });
});
[/js]

Demo

View Demo

0 thoughts on “One Show Hide – jQuery Plugin”

Leave a Reply

Your email address will not be published. Required fields are marked *