Question

when i click on one panel link “hello” or “Hi”, then that panel must be maximized and only that panel must be shown in page, again when i click it back it need to go for its original position, same for other panel, i tried implementing but some where i went out off,when i click on hello link it can be maximized but another panel also can be viewed in page.

 http://jsfiddle.net/Soni/tRen6/1/



<script>
$(function() {
    $("#container").sortable({
        handle: 'h1',
        scroll: false,
        revert: true,
        tolerance: 'touch'
    });
$(".button").toggle(function() {
        $(this).parent().animate({
            backgroundColor: "#0000",
            width: 1000,
        }, 500);
    }, function() {
        $(this).parent().animate({
            backgroundColor: "#000",
            width: 100,

        }, 500);
    });

});

Answer 1

Not a elegant way, but it works

$(function() {
$("#container").sortable({
    handle: 'h1',
    scroll: false,
    revert: true,
    tolerance: 'touch'
});

$(".button").toggle(function() {
    $(this).parent().animate({
        backgroundColor: "#0000",
        width: 500,
    }, 500);
    $(".button").fadeOut();
    $(this).fadeIn();
}, function() {
    $(this).parent().animate({
        backgroundColor: "#000",
        width: 100,
    }, 500);
    $(".button").fadeIn();
    $(this).fadeIn();

});

});

See if it`s resolve.

You can also see next or before

Or maybe create a class to each elemente.

or try to count with eq(). But I don`t know where you are going to use.