We needed a simple and clean jQuery plugin to columnize lists: after a couple of hours spent on the lookout for it with no success, we decided to create our own one.

Here you find the result of a couple of nights’ work, which we find to be pretty good. We release it for free and hopefully it will help you whenever you need to split a list into different columns.

See the Easy List Splitter Plugin in action (Demo)
Download the source code on GitHub

Easy List Splitter Plugin Explained

To keep it as simple and flexible as possible we didn’t set any CSS rules or column widths in the JavaScript. The plugin simply generates clean and valid HTML code that you can then style as you wish, floating the lists or doing whatever you like.

The plugin will get your list, wrap it into a container div, generate as many lists as the number of columns you require and evenly split the list items into the different list elements. If the list items are not enough to evenly fill in all the columns, the plugin will hide the columns in excess (this might happen only if you’re ordering your list items vertically as per default).

You can see the Easy List Splitter Plugin in action here.

As usual, all of that will be realized in an unobtrusive and accessible way.

What’s new?

Easy List Splitter keeps the HTML to the minimum. No unnecessary elements or inline styles are added to the code. You’ll get a clean plain HTML with some classes that you can use as hooks to easily style your lists. Choose whether to order your list items vertically or horizontally. You can then decide whether to modify the default CSS or apply a new one.

Features

  • Split any ordered (OL) or unordered (UL) list
  • Define the number of columns in which you want your lists to be split
  • Target more than one list on the same page and set different number of columns for each of them
  • CSS is completely separated from the javascript. You can either modify the default one or create your own
  • A class “last” will be added to each last UL or OL so that you can easily remove side padding or margin
  • New: Easy List Splitter Plugin preserves nested lists now!
  • New: You can now choose whether to order your list items vertically or horizontally
  • There is no need to modify your HTML. Just target your list element using any of the JQuery-selectors.
  • No dependencies at all!
  • Plugin size 4KB!

Usage

Here follows the code for a simple unordered list:

  • Lorem ipsum 1
  • Donec pede 2
  • Fringilla vel 3
  • Eget arcu 4
  • In enim 5
  • Lorem farem 6

We need now to  include three different files in the head of the document: the jQuery library, the EasyListSplitter plugin and our Script file from where we’re going to call the plugin. If you do not know yet how to set up your jQuery environment, you can find a detailed explanation here, otherwise just keep reading!

You can target any list elements using the powerful JQuery-selectors. The plugin requires one argument only, the column number. Here is a sample that shows you how to activate the plugin using a class. Bare in mind that you can also target the list element straight away (eg. $(‘ul’)). If you don’t set the colNumber argument, the plugin will generate two columns by default:

$('.my-list').easyListSplitter({ colNumber: 3 });

Also, if you don’t specify the direction parameter, the plugin will order the list items vertically by default as follows:

list item 1      list item 4      list item 7
list item 2      list item 5      list item 8
list item 3      list item 6

With version 1.0.1 you can now choose whether ordering your list items vertically as above or horizontally, getting the following layout:

list item 1      list item 2      list item 3
list item 4      list item 5      list item 6
list item 7      list item 8

What you have to do is simply specify the direction: ‘horizontal’ parameter when you call the plugin:

$('.my-list').easyListSplitter({
   colNumber: 3,
   direction: 'horizontal'
});

Apply your CSS

Here comes the easiest part. The plugin has just split our list into three different lists. What we have to do to get a multi-column list is simply apply some CSS. You can either modify the default one or apply your own. Basically we just want to set a float property to all the lists and apply some margin.

Conclusion

This plugin is totally free. A link back to this post would be much appreciated! You can get the Easy List Splitter plugin full sample here (8KB – zip file) or get the JavaScript file only.