jQuery Plugins by Fredi Bach: InputNotes, AutoAnchors, RandomClass, RemoveOverflow, aPartHide, TabSelect, DefaultsTagger, SelectSwitcher, LivingFade, SlideInReplace, WaveAnimate, jKit (external)

aPartHide jQuery Plugin

A jQuery plugin to hide elements from a list or similar structure that exceeds a specific amount of entries. Additionaly the plugin adds a control to show those elements (or hide them again).

For once, aparthide is a good thing. ;-)

Demo Usage Styling Download Compatibility Changelog

Demo

In this first demo you can see the basic usage of the plugin without any additional options on a standard list:

Demo

In the default configuration, the plugin triggers the hiding process after five elements and hides all but three of them. In other words, a list with only four or five elements is fully shown:

Demo

The plugin works with all kind of html elements, here's an example where we use divs for each "list" element:

Demo

Demo list item 1
Another list item
Third list item
3 + 1 = item 4
Five fingers, five item
Six, part of 666
Seven eleven, tasty

And there are of course many options to customize the behavior of the plugin as shown in the following example where we only show two elements, with a slow sliding effect and different button texts (you can of course use images as well for the button states):

Demo

Usage

This is how you use the plugin with the default settings:

$(document).ready(function(){
  $("#box1").aPartHide();
});

This is how we made the plugin work with the div based list:

$("#box3").aPartHide({
  listElement: 'div.listbox',
  listItems: 'div.listelement'
});

This are all the default options:

$("#box3").aPartHide({ 
  showHTML: 'more ...',
  hideHTML: 'less ...',
  hidingTriggerLength: 5,
  hideToLength: 3,
  listElement: 'ul',
  listItems: 'li',
  listControlElement: '.showhide',
  showSpeed: 'fast',
  hideSpeed: 'fast',
  controlElementShowClass: 'showHTML',
  controlElementHideClass: 'hideHTML',
  onHide: function() {},
  onShow: function() {}
});

As you can see, you can even add callback functions in case you want to do some additional actions on hide or on show.

Styling

You're completely free to style your list elements. Default setting for the control element is a div with the class "showhide". Both, the list and the control element, must be inside the element you apply the plugin to. Here's how I styled the "showhide" element:

div.showhide {
  margin-top: 4px;
  padding: 2px;
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
  cursor: pointer;
  cursor: hand;
  border-top: 1px #ddd solid;
  border-left: 1px #ddd solid;
  border-bottom: 1px #ccc solid;
  border-right: 1px #ccc solid;
  background: #eee;
}
div.showhide:hover {
  border-top: 1px #666 solid;
  border-left: 1px #666 solid;
  border-bottom: 1px #222 solid;
  border-right: 1px #222 solid;
  background: #333;
  color: #fff;
}

Download

Current version: jquery.aparthide-0.2.js (2.5k not minified)

Compatibility

Tested in:

With:

There really is nothing complicated in there, so expect the plugin to work in older browsers as well.

Changelog