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 [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.

    <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'  });  
});

Demo

View Demo

LEAVE A REPLY