Layout 2 colunas - jQuery

Olá, fiz um layout com 2 colunas:

<div id="widget">
 <a href="#">Link</a>
 <ul class="hide">
 Conteudo...
 </ul>
</div>
<div id="conteudo">
 <p>
 Conteudo...
 </p>
</div>

CSS:

#widget{ width: 42%; }
#conteudo{ width: 42% }
Quando clicar no elemento " a " do " #widget "

$('#widget a').click(function(){
	$(this).parent.find('ul.hide:visible').animate({'height':'hide'}, 'slow');
	$(this).parent.find('ul.hide:hidden').animate({'height':'hide'}, 'slow');
})

Até ai beleza, agora como faço por exemplo quando esconder a UL (.hide) ele diminuir a WIDTH da Div(#widget) para 5% e almentar da DIV (#conteudo) para 90%?

Obrigado!