jquery - Animating 3 DIV's onClick -

jquery - Animating 3 DIV's onClick -

i have 3 div's, each 33.3333%, should animated click.

<div id="wrapper"> <div id="left" class="links">links</div> <div id="middle" class="mitte">mitte</div> <div id="right" class="rechts">rechts</div> <div class="clear"></div>

the clicked div should increment 60%, both others should shrink 20%.

but haven't jquery skills i've searched in net solutions. solution i've found hover , not click.

$("#left, #middle, #right").each(function() { $(this).data("standardwidth", $(this).width()); }); $("#left, #middle, #right").hover(function() { $(this).animate({ width: "60%" }, 300 ); $(this).parent().children().not(this).animate({ width: "20%" }, 300 ); }, function() { $(this).parent().children().each(function() { $(this).animate({ width: $(this).data("standardwidth") }, 300 ); }); });

as can see here hover works fine, how can alter click?

is out there can help?

thanks in advance

thorsten

change code :

$("#left, #middle, #right").each(function () { $(this).data("standardwidth", $(this).width()); }); $("#left, #middle, #right").click(function () { $(this).animate({ width: "60%" }, 300); $(this).parent().children().not(this).animate({ width: "20%" }, 300); });

jsfiddle example

all did alter hover click , remove sec function.

and here's second version allow sec click restore original widths.

$("#left, #middle, #right").each(function () { $(this).data("standardwidth", $(this).width()); }); $("#left, #middle, #right").click(function () { if ($(this).data('active')) { $(this).parent().children().each(function () { $(this).animate({ width: $(this).data("standardwidth") }, 300); }); $(this).data('active', 0); } else { $('#wrapper div').data('active', 0); $(this).data('active', 1); $(this).animate({ width: "60%" }, 300); $(this).parent().children().not(this).animate({ width: "20%" }, 300); } });

jquery html css onclick