Question

I ran into trouble, When i click on img or link tag my box must be maxmized and when i click again the same button then my box must minimize.
Hear i ran into trouble, can any one correct my issue

1. when i click on hello button my box must be maximised and when i click back it need to get minimize,
2. hear the problem is both the buttons getting maximizes when i start click event??

i am unable to find wht issue is

http://jsfiddle.net/Navya/eVUkG/1/

$(function() {
        $( "#button" ).toggle(
            function() {
                $( "#effect" ).animate({
                    backgroundColor: "#0000",
                    width: 500,

                }, 500 );
            },
            function() {
                $( "#effect" ).animate({
                    backgroundColor: "#000",

                    width: 240
                }, 500 );
            }
        );
    });

Answer 1

First off, both buttons have an ID of button. Id’s must be unique. Secondly, instead of targeting .effect just target the parent of the button (demo)

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

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

});​