You are in this section: Blog
jQuery plugin: Easy List Splitter
After a couple of hours spent on the lookout for a simple and clean jQuery plugin to columnize lists with no success, I decided to create my own one. It took me a couple of nights but the result is pretty good and hopefully it will help you whenever you need to split a list into different columns.
Version 1.0.1 has just been released!
To keep it as simple and flexible as possible I 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: 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!
Planned additions
I’m totally open for suggestions. Here are some future additions that came out of the comments below:
- Preserve nested lists
- Allow for custom class on the wrapper div
Usage
Here is the HTML code for a simple list:
<ul class="my-list"> <li><a href="#">Lorem ipsum 1</a></li> <li><a href="#">Donec pede 2</a></li> <li><a href="#">Fringilla vel 3</a></li> <li><a href="#">Eget arcu 4</a></li> <li><a href="#">In enim 5</a></li> <li><a href="#">Lorem farem 6</a></li> </ul>
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 in my first jQuery tutorial, 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 download the Easy List Splitter plugin here or get the full sample below.
Download Easy List Splitter Plugin for jQuery (8KB – zip file)
Related posts
32 Comments
Leave a comment
Please rate the article as it will help me decide future content and posts. Comments are moderated. Please no link dropping, do not spam and do not advertise!
One suggestion is to have the option of adding a class for even or odd rows and columns (even_row, odd_column). That way people can style the contents of the columns and rows easily with css and have alternating backgrounds and other effects.
Nice work! That’s a neat little plugin. Since many menus are designed using lists one can arrange them with column layouts with your code.
Thx for sharing it.
ubuntu administrator
Very nice.
It would be cool if lists nested inside column items could be preserved.
Very nice. Thank you for sharing!
Are anchors required inside these lists?
I was wondering if the lists could contain just text in this format:
Quisque facilisis erat a dui.
Quisque facilisis erat a dui.
Very nice!
As cool as the paintbrush. Nice!
Thank you for sharing this. I had an issue a few weeks back that would have needed this.
Ha, this is awesome. I’ve been hesitating to work on a project since I was going to need something exactly like this. Thanks.
thanks for sharing, sweet. split and win.
Couldn’t you just do this with CSS? Set a width and height on the UL (or on a container div), set a divisible width on the LIs and float them left.
Ah, I see, this maintains the vertical sort; what I said would sort sequential items next to each other rather than above/below.
Nice work
Spettacolo è stato twittato anche su Smashingmag, la bibbia del web!
This is great as we needed something just like this for when we are describing our courses. One long list is soo boring, this splits it up nicely.
Thanks.
!
For direction: ‘horizontal’ you don’t need JS. That can be done with CSS only.
Nice Stuff!
Very nice! It *almost* meets a requirement I have in a current project. This may serve as a good starting point rather than trying to code something up completely from scratch.
The main requirement I have is adding a custom wrapper / pre-and-post-fix to the split lists. For example, I need to take a list like ul>li*40 and make it (div.myClass>ul>li*10)*4. Hope my shorthand makes sense, but the idea is that if this plugin allowed a custom wrapper, it would be pretty close to perfect! So, I guess that’s my suggestion for a future release.
Anyway, thanks for the contribution, it’ll definitely save me an afternoon of coding.
Hi guys, thank you all for your comments!
@Alan: I’m not sure if that’s something that needs to be part of the plugin itself. Getting classes on even/odd lists and list items is very easy and can be achieved by adding the following code to your script file. Make sure you add this after the call to the plugin.
@George Connor: Yeah, you’re absolutely right. I will definitely make sure that nested lists are preserved with the next release of the Easy List Splitter plugin.
@Chris From Detroit: Anchors are not required at all. All you need is a simple ordered or unordered list. Simple text works fine
@Ben: Thanks Ben, I’m glad you like the paintbrush
@Luca Goria: I know!!! That’s just awesome. I couldn’t believe that my plugin was tweeted by the Smashing Magazine guys!
@Acanski Petar: That’s true only when all the list items have the same height. In fact, if they have different heights (e.g. one item goes on two lines) and you simply float the LIs, the list items on the next lines will get a wrong positioning. Not sure, if I made myself clear. It’s probably easier to understand if you try it yourself.
@Ryan Chouinard: That’s another good suggestion! I will definitely implement the custom class in the new release. Thanks!
Hi there.
I added a first class to the first list item and a general class to them all.
It is useful for to have these in there.
I am modding this as well so it can support adding Headers for each new list (a h5 for example)
My modding goal is so you can properly use this great plugin for mega drop downs in a CMS which can only handle a normal list.
Nice plugin….
and cool web site and the paintbrush too….
Excellent plugin, really helpful tool to have …
I have been banging my head for days looking for a way to filter divs that are laid out with .masonry. But filtering lists is doable – enter your plugin. I can get a layout similar to masonry (divs float vertically instead of horizontally) and be able to use quicksand or some other filter.
My hats off to you.
Now I only have one issue. I am trying to filter the list items and any filter I try is only working on the first column. I can’t seem to find a way for any filter to work on the entire group.
help?
thanks so much!
My issue now is that I am unable to filter the list items using any jquery filter by class. I’m assuming this is because your plugin splits the lists into seperate lists?
any workaround?
I think it is not working with 1.4.2 jquery. Only think I do to test is maki list and use your script with #defined and it splits into 2 parts but it wont move right to be on same horizont. Am I doing something wrong ?
Please delete previous comment, I should really think first and then click enter. It works like dream. Thanks
Nice Work, but I didn’t get the idea of using Javascript when a minimal css would suffice?
Thanks,
viki
Hi There,
Nice plugin. I had a need of using it to split a long list of form elements based on dl-dt-dd markup. I was able to achieve that pretty easily – thanks to your clear and easy to follow code. I’m planning to post that as a short blog in my site with a link to this. Lemme know if that’s okay.
Thanks
Emran
This is very nice. I went looking for something along these lines. Another plugin weighed in @ 12k MINIMIZED. Looked like 2x or 3x the code this has. Your code looks short and sweet, and I’m using it – thanks!
Great plugin, but when will the nested list feature be implemented? I need it soon.
Exactly what I needed. The content even wraps as expected when an individual li exceeds the defined width. Thank you!
Thank you for the plug-in. Quick question it works but the page is rendering the list complete and then splitting it into two which results in a quick flash when the page is loading. Any suggestions on how to avoid this?