Syncing toggle icons when collapsing / expanding multiple portlets at once

Syncing toggle icons when collapsing / expanding multiple portlets at once

Not sure if this is the correct forum but I'm fairly new to JQuery so I think I'll fit right in. I've come pretty far with my coding but now I have encountered a problem I don't know how to solve and I have searched everywhere. Hope you can help.

So, I have created multiple expandable and collapsible portlets with plus / minus icon toggles. When I collapse or expand portlets individually the icons toggle correctly. I have added two buttons that expand or collapse all portlets respectively - again the icons toggle correctly. However, when I collapse one portlet and then collapse all portlets (using the button) the toggle icon for that particularly portlet will be out of sync.

How can I sync all the portlets so when they are collapsed there will always be a plus icon and vice versa?

I have created a JS FIDDLE 

My Code:

  1. $( ".portlet" )
  2.   .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
  3.   .find( ".portlet-header" )
  4.     .addClass( "ui-widget-header ui-corner-all" )
  5.     .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>"); 

  7. $( ".portlet-toggle" ).on( "click", function() {
  8.   var icon = $( this );
  9.   icon.toggleClass( "ui-icon-plusthick ui-icon-minusthick" );
  10.   icon.closest( ".portlet" ).find( ".portlet-content" ).toggle("fast");
  11. });

/*This is the click.functions for the collapse / expand all buttons */

  1. $( "#expand-all" ).click(function() {
  2.   $( ".portlet-content" ).show( "fast" );
  3.     $( ".portlet-toggle" ).toggleClass( "ui-icon-plusthick ui-icon-minusthick");
  4. });

  6. $( "#collapse-all" ).click(function() {
  7.   $( ".portlet-content" ).hide( "fast" );
  8.     $( ".portlet-toggle" ).toggleClass( "ui-icon-minusthick ui-icon-plusthick");
  9. });

Thanks