code: function pongTableExpand( divId, id, r, divs ) {
    if ( poTbl[ divId ].expand[ 'row' + r ] === id ) { // request to colapse extra data
      pongTableUnExpand( divId, id, r );
      return;
    }
    if ( poTbl[ divId ].expand[ 'row' + r ] ) {
      // row is expanded, but other data is reauested (other button in row)
      pongTableUnExpand( divId, id, r );
    }
    log( "Pong-Table",  'Expand divid=' + divId + ' id='+id+' row=' + r );
  
    // render empty structure:  
    var expandDivId = divId+'R'+r+'E';
    var contentItems = [];
    contentItems.push( '<div id="'+expandDivId+'">' );
    renderPongListDivHTMLsub( contentItems, expandDivId, divs, r, 0 );
    contentItems.push( '</div>' );
    
    $( '#'+divId+'R'+r ).after( 
      '<tr id="'+divId+'R'+r+'ExpRow" class="'+divId+'RowExpand tableExpandRow">' +
      '<td colspan="100%">' +
      contentItems.join( '\n' ) +
      '</td></tr>' );
  
    // fill data into structure
    var rowDta = poTbl[ divId ].pongTableData[r];
    log( "Pong-Table",  '  rowDta=' +JSON.stringify( rowDta ) );
    pongListUpdateRow( expandDivId, divs, rowDta, r, 0, r, divId );
  
    // remember what which button and row was expanded
    $( id ).button( { icons: { primary: 'ui-icon-circle-triangle-n' } })
    poTbl[ divId ].expand[ 'row' + r ] = id;
  }
docs: ---------------------------------------------------------------------------- expand row to show additionla data