How to make item always float left at top when clicked?

Question

I write a page that show a list of div. When I click on any item, that item will show at left corner (left: 0; top: 0;). If you check my fiddle, click 1st item, I want the others item will show exactly position of 1st item. Please help.

Here is my Fiddle

$(document).ready(function () {
    var li = $('#list li');

    $(li).on('click', function () {
        $(".big").not(this).removeClass("big");
        $(this).toggleClass("big");
    });
});

UPDATE: I also want them return back their original position when I click back again.

Answer 1

Check out this JSFiddle

I solved your problem by creating a dummy li element at the position you want your floating li to be. It is then set to the height of the opened li, which gets an absolute position to be placed in the top left corner.

Add position:absolute; to ul li.big

Now we're going to create a dummy <li class="placeholder"></li> right after <ul id="list">

Give it the CSS definition

ul li.placeholder {
    display:none;
    height:200px;
    width:500px;
}

and add to your click event function:

if($(this).hasClass("big"))
 $('ul li.placeholder').css('display','block').height($(this).height());
else
 $('ul li.placeholder').css('display','none');

Of course this needs some tweaking (the height is calculated incorrectly due to the transition effect), but it should point you in the right direction.

Answer 2

Try this

$(document).ready(function () {
    $('#list li').on('click', function () {
        $(".big").removeClass("big");
        var clone = $(this).addClass("big").clone();
        $(this).remove();
        $('#list').prepend(clone);
    });
});

Answer 3

so im assuming you would like your item to return to its original position.

what we need to do is add a data attribute on page load for each of the items so that we can revert them to their original positions later.

i also use .is() to help determine if an item needs to be moved/shrunk

Check it out

http://jsfiddle.net/evpq8/12/

Answer 4

I just added a class to the first li element and swapped the htmls

$(document).ready(function () {
    var li = $('#list li');
    $(li).on('click', function () {
        if ($(".firstItem").hasClass("big")) 
        {$(".firstItem").removeClass("big");}
            else
         {
            $(".firstItem").removeClass("big");

            var posItem = $(".firstItem").html();
            var curitem = $(this);
            $(".firstItem").html($(this).html());

            $(this).html(posItem);
            $(".firstItem").not(this).removeClass("big");

            $(".firstItem").toggleClass("big");
        } 

    });
});

http://jsfiddle.net/kBZ4L/3/