checkbox click and show on first

by Intesar Haider

HTML

<ul class="container">
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
</ul>

CSS

.container{
    position:relative;
}

JavaScript

$("input").click(function() {
    var index = $(this).closest("li").index();
    var itemHeight = $(this).closest("li").outerHeight();
    if (!$(this).is(":checked") || index == 0) return;
    $(this).closest("li").css({
        "top": itemHeight * index,
        "position": "absolute"
    }).animate({
        "top": 0
    }, 500, function() {
        $(this).prependTo("ul").css("position", "static")
    });
})