Please kindly advise, I want the second portlet to change height to be the same as the first portlet whenever I did a toggle on the first portlet.

I used the standard jquery ui portlet, the code below is what I have tried but nothing happens when I toggle the first portlet...

Script:

2.     $( ".portlet-toggle" ).click(function() {
3.       var icon = $( this );
4.       icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
5.       icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
6.       var a = $("#also");
7.  a.height(icon.height());
8. });

HTML:

2. <tr><td>
3.   <div id="also" class="portlet"> Sunday:
4.   </div></td></tr>
5. 
   
6. <div class="column">
7.   <div id="test" class="portlet">
8.     <div class="portlet-header">Feeds</div>
9.     <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
10.   </div>

Because the portlets are side by side, I want #also to expand to same height when #test is opened and minimized to same height when #test is collapsed...

What went wrong with my code?