User:Victar/der3

Example #3

Using display:block;height:calc((14px + 10px) * 3);overflow:hidden to hide additional entries on the basis of li { line-height:14px;padding-bottom:10px}.

Example #4

Requires the following javascript to function:

var columns = 3;
var rows = 3;
var $rootElement = $("#example4");
var count = $rootElement.find("ul li").length;
var round_split = Math.round(count/columns);
var offset = 0;

if (count < (columns*rows)) { $rootElement.find(".vsToggleElement").hide(); }

if (count - (round_split*columns) == 1) { offset = 1 }

var col2_start = (round_split+1)+offset
var col3_start = ((round_split*2)+1)+(offset*2)

var links = "ul li:nth-child(-n+" + rows + ")";
if (columns == 2 || columns == 3) { links += ", ul li:nth-child(+n" + col2_start + "):nth-child(-n+" + (col2_start+(rows-1)) + ")"; }
if (columns == 3) { links += ", ul li:nth-child(+n" + col3_start + "):nth-child(-n+" + (col3_start+(rows-1)) + ")"; }

$rootElement.find("ul li").not(links).addClass("vsHide");