Question

I have Created a simple Jquery Code..

The Code is

<script type="text/javascript">
            $('#Button1').click(function (evt) {
                evt.preventDefault();
                $('#Textbox1').animate({ width: '300px', height: '75px' })
            })
           </script>

Now i want to chain the result So On clicking the button another time
I get the Original Textbox Size back

I tried this code below but it does not work. Any suggestions?

<script type="text/javascript">
            $('#Button1').click(function (evt) {
                evt.preventDefault();
                $('#Textbox1').animate({ width: '300px', height: '75px' }) })
                .animate({ width: '100px', height: '10px' })
                });
           </script>

Answer 1

You want to execute two different functions on alternate clicks. At the first click you change the size and on the second click you change it back to the original. You can use toggle ^[docs] for that:

$('#Button1').toggle(function(evt) {
    evt.preventDefault();
    $('#Textbox1').stop().animate({ width: '300px', height: '75px' });
}, function(evt) {
    evt.preventDefault();
    $('#Textbox1').stop().animate({ width: '100px', height: '10px' });
});

Update: Here is a demo. Apparently someone disagrees with my answer. This should show that it works.