jQuery toggle animation

Question

I have this jQuery:

$(document).ready(function() {    $("#panel").hide();     $('.login').toggle(    function()    {       $('#panel').animate({       height: "150",        padding:"20px 0",       backgroundColor:'#000000',       opacity:.8 }, 500);    },    function()    {       $('#panel').animate({       height: "0",        padding:"0px 0",       opacity:.2       }, 500);    }); }); 

This is working fine, but I need to extend the functionality a little. I want to also similarly manipulate another div's properties in sync with the #panel div. I tried adding two more functions relating to the secondary div, but I just got a 4-phase toggle...haha! Forgive my ignorance!

Thanks guys!

Answer 1

$('.login').toggle(     function(){         $('#panel').animate({             height: "150",              padding:"20px 0",             backgroundColor:'#000000',             opacity:.8         }, 500);         $('#otherdiv').animate({             //otherdiv properties here         }, 500);     },     function(){         $('#panel').animate({             height: "0",              padding:"0px 0",             opacity:.2         }, 500);              $('#otherdiv').animate({             //otherdiv properties here         }, 500); }); 

Answer 2

I dont think adding dual functions inside the toggle function works for a registered click event (Unless I'm missing something)

For example:

$('.btnName').click(function() {  top.$('#panel').toggle(function() {    $(this).animate({       // style change    }, 500);    },    function() {    $(this).animate({       // style change back    }, 500);  });