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>
</ul>

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

$(document).ready(function () {
  
  $('.loremipsum').easyListSplitter({ 
    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 {...}
 </style>

5. Set the direction.

$('.loremipsum').easyListSplitter({ 
  direction: 'vertical' // or horizontal
});

Change log:

2018-03-22

• Updated page

2018-03-03

• Updated page

---

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