Change theme:

Sample 1 - show sources

Default options

<div id="l2l_1">
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
    <ul>
        <li>item 5</li>
        <li>item 6</li>
    </ul>
</div>

$('#l2l_1').l2l();

item 1
item 2
item 3
item 4

item 5
item 6

Sample 2 - show sources

Fix width, and interconnect with others

<div id="l2l_2">
    <ul>
        <li>item 10</li>
        <li>item 11</li>
        <li>item 12</li>
        <li>item 13</li>
        <li>item 14</li>
    </ul>
    <ul>
    </ul>
</div>

$('#l2l_2').l2l({
     width : 200,
     interconnect : true
});

$('#show-right-l2').click(function(event){
    event.preventDefault();
    $('#l2-result').empty();
     
    //get the current data
    var data = $('#l2l_2').l2l('getItems');
    
    //get the items from the right's' list
    data.right.each(function(idx, elt){
        $('#l2-result').append($(elt).text() + '
');
    });
     
    return false;
});

item 10
item 11
item 12
item 13
item 14

Show right items

Sample 3 - show sources

Sort and auto-sort with custom sort algo (reverse).

<div id="l2l_3">
    <ul>
        <li>item 20</li>
        <li>Item 24</li>
        <li>item 22</li>
        <li>item 21</li>
        <li>item 23</li>
    </ul>
    <ul>
        <li>item 29</li>
        <li>Item 26</li>
        <li>item 27</li>
    </ul>
</div>

$('#l2l_3').l2l({
    sort : true,
    autosort: true,
    sortAlg : function(current ,next){
        var currentVal = $(current).text().toUpperCase();
        var nextVal = $(next).text().toUpperCase();
        return (currentVal < nextVal) ? 1 : (currentVal > nextVal) ? -1 : 0;
    }
});

item 20
Item 24
item 22
item 21
Item 25
item 23

item 29
Item 26
item 27