jQuery Easy List Splitter Plugin

File Size: 9.24 KB
Views Total: 3599
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Easy List Splitter Plugin

A jQuery Plugin helps you create multiple lists (ol and ul) from a single list ordering the items vertically or horizontally.  You can then decide whether to style your list via CSS as you wish.

How to use it:

1. Inlcude jQuery Library and easyListSplitter.js in your head section

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="scripts/jquery.easyListSplitter.js"></script> 

2. Markup (Ordering the items vertically)

<ul class="loremipsum">
<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>
<li><a href="#">Pede justo 7</a></li>
<li><a href="#">Vel aliquet 8</a></li>
<li><a href="#">Arcu eget 9</a></li>
<li><a href="#">Justo rhoncus 10</a></li>
<li><a href="#">Ipsum dolor 11</a></li>
<li><a href="#">Justo pedec 12</a></li>
<li><a href="#">Romanorum 13</a></li>

3. Call the plugin and set the number of columns you want

$(document).ready(function () {
    colNumber: 3 // Insert here the number of columns you want. Consider that the plugin will create the number of cols requested only if there's enough items in the list.

4. Style your list

<style type="text/css">
ol {...}
li {...}

5. Set the direction.

  direction: 'vertical' // or horizontal

Change log:



  • Updated page

This awesome jQuery plugin is developed by madeincima. For more Advanced Usages, please check the demo page or visit the official website.