I have multiple collapsible/expandable portlets that can be resized. But when I resize one of them (vertically) that particular portlet is not collapsing afterwards. The other portlets are collapsing just fine. But the one that were used for resizing will not collapse properly after resize.

I have a working JS FIDDLE with the issue

My code:

2. $( function() {
3.   $( ".portlet" )
4.       .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
5.       .find( ".portlet-header" )
6.         .addClass( "ui-widget-header ui-corner-all" )
7.         .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
8.  
9.     $( ".portlet-toggle" ).on( "click", function() {
10.       var icon = $( this );
11.       icon.toggleClass( "ui-icon-plusthick ui-icon-minusthick" );
12.       icon.closest( ".portlet" ).find( ".portlet-content" ).toggle("fast");
13.     });
14. 
    
15.     $( "#expand-all" ).click(function() {
16.       $( ".portlet-content" ).show( "fast" );
17.         $( ".portlet-toggle" ).toggleClass( "ui-icon-plusthick ui-icon-minusthick");
18.     });
19. 
    
20.     $( "#collapse-all" ).click(function() {
21.       $( ".portlet-content" ).hide( "fast" );
22.         $( ".portlet-toggle" ).toggleClass( "ui-icon-minusthick ui-icon-plusthick");
23.     });
24.    
25.     $( ".portlet" ).resizable({
26.       alsoResize: ".portlet-content",
27.       handles: 's',
28.     });
29. });

Help is much appreciated. Thanks