SO - 23752544

by aaronk85

HTML

<ul id="parent">
    <li>1</li>
    <li>2
        <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

JavaScript

jQuery(function () {
    var item;
    $('#parent li').on('click', function (e) {
        e.stopPropagation();
        if (item) {
            $(this).after(item);
            item = undefined;
            $('.arrow').remove();
        } else {
            item = this;
            if ($('#parent > li').is(":first-child")) {
                $('li').before('<li class="arrow">--<</li>');
            } else {
                $('li').after('<li class="arrow">--></li>');
            }
        }
    });
});