Execute a function after another function is processed completely

Execute a function after another function is processed completely

Hi folks,

I cannot solve a problem dealing with deferrers. The goal is to wirte two function to be executed subsequently, one after another.

I have elements, and the functionality should be

1. to show additional content as one clicks onto the element
2. by clicking the same element, the content should not be displayed anymore
3.Clicking an element while another one's content is shown should lead to the function to remove the other content FIRST and THEN show the clicked element's content.

There is a central function to control show and hide element content:
  1.     function displayRefContent ( clickedRefID ) {           
  2.       if ( $( 'div#' + clickedRefID + '_refAdditionalContent' ).length ) { // check, if element is opened already, if yes then close only           
  3.             removeRefContent();           
  4.         } else {                       
  5.             if ( $( 'div.refAdditionalContent' ).length ) {         // check whether other element is opened and close    first, before open another element, WORKS JUST FINE                       
  6.                 removeRefContent().then( appendRefContent2EndOfLine ( clickedRefID ) );        // THIS IS THE PROBLEM LINE               
  7.             } else {           
  8.                 appendRefContent2EndOfLine ( clickedRefID ); // if no other content element is opened, only open element, WORKS JUST FINE              
  9.             }           
  10.         }               
  11.     }   

and the two functions to AT FIRST fade out and remove object and AFTERWARDS append and fade in new object

  1.     var removeRefContent = function () {           
  2.         var defRemoveContent = $.Deferred();       
  3.         $( 'div.refAdditionalContent' ).slideToggle( 500 , function()         
  4.             $( 'div.refAdditionalContent' ).remove();
  5.             defRemoveContent.resolve();
  6.         });                            
  7.         return defRemoveContent.promise();       
  8.     }
   
  1.     function appendRefContent2EndOfLine ( requestedRefID ) {           
  2.        
  3.         // get refContent from reference storage container (could be more elegant, but not relevant here)
  4.         var refContent = '<div id="' + requestedRefID + '_refAdditionalContent" class="refAdditionalContent">';
  5.             refContent = refContent + $( 'div#' + requestedRefID + '_additionalContentStorageContainer' ).html();
  6.         refContent = refContent + '</div>';   
  7.         var lastElementInRowID = ...;    // some code to find last refPreviewImage in elements row and store in variable lastElementInRowID   
  8.        
  9.         // add refContent after last element in row and toggle in       
  10.         $( 'div#' + lastElementInRowID + '_ref' ).after( refContent );   
  11.         $( 'div#' + requestedRefID + '_refAdditionalContent' ).slideToggle( 500 );       
  12.        
  13.     }
   
The problem is in the case of displayRefContent, in which there is already content open, which needs to be closed at first and then afterwards open the new content. It does it at the same time, so I cannot influence the order and the timing (function appendRefContent2EndOfLine after function removeRefContent is finished).

Feel like the most bloody beginner in the world, frustrated and with no more idea left to follow. Checked also, if funcitionality is impacted by other things, for example document not completely loaded of the fact, that the content is loaded after document.ready(). Don't see any impact. Also checked a lot about asynchr and synchr functions and many other stuff and thought I understood in detail, how to tackle this problem. But not true... I know this problem has been solved a hundred times.

The result can be seen here. Go to the references and click one of it, and then another.

Thank you, hope somebody is willing to help
Frank