For those users not familiar with js and associated html and not used to seeing/finding the patterns in such code for themselves, the following directions are provided:

[The reason for all the forward slashes, is that I had considered putting all these directions in the js file code itself, as comments.
 I left it commented with the forward slashes in case you wanted to put these directions right into your copy of the js code.]

To start out, I am quoting key parts of the divTabAcc.js javascript (/jquery/jquery.ui) file code below (with comments preceded by forward slashes):

// [The always-present, generic functional code at the top of the js file has been 'snipped' , i.e. omitted, in the present display of code-with-comments. ]

// ////////// WHAT FOLLOWS IS A UNIT OF CODE FOR THE *FUNCTIONALITY* OF ONE particular LEFT BUTTON & the associated right div tabs
// //////////   & their inner accord. tabs // (Really, this is all the code!!)
//  ///////////   (This is code in the divTabAcc.js (javascript file).)  ALL THE THINGS THAT CHANGE for each particular right-hand div controlled by a left-hand button are noted (all 6).
// /////////////// TO DELETE ONE, DELETE ONE SUCH UNIT in the js code and the corresponding html (described in the footnote at the very bottom).
// /////////////// TO ADD ONE, ADD ONE SUCH UNIT in the js code and add the associated, corresponding html (described in the footnote at the very bottom of this page). //////////////
// ////////////// **** SEE NOTES AT THE BOTTOM OF THIS SECTION. **** ///////////////////////


$("#layer2").click(function() {   // What changes unit to unit is the layer name. layer2 is the FIRST tab/accord. div in the existing sample of the program

var that = $(this);

$(".lmenu p").each(function() {
if($(this) != that) {
if($(this).css("color") == "red" || $(this).css("color") == "blue") {
$(this).css("color", "blue");
} else {
$(this).css("color", "black");
}
}
});

$("#layer11").css("display","none");  // This line always references layer 11 -- the default layer with the directions, the right-hand div when the page is first loaded
$(".rmenu").css("display","none");
$("#layer12").css("display","block"); // This is the second line of code that varies from 'unit' to 'unit'

var tabOptsa = { // tabOptsa here; others have tabOptsb, c, d, etc. (Thus, this is the third line that changes, instance to instance.)
show: function(e, tab) {

$("#myAccordion" + tab.index + "a").accordion();  // Fourth line of difference 'unit'-to'unit':  "a" for the first tab/accord unit "b" for the second, "c" for the third, etc
}
};
//create the tabs
$("#myTabsa").tabs(tabOptsa); // Fifth change, unit-to-unit: This line should have #myTabsa and the tabOptsa with the proper letter at the END

$("#layer2 p").css("color", "red"); // Sixth: Again, this line must refer to the left-hand button layer the associated code goes with.

});


// //////////////////// END OF UNIT OF FUNCTIONAL CODE FOR LEFT MENU 'BUTTON' and all the associated right div content ////////////
// /////////////////// NOTE NAMING PATTERN OF ABOVE 'BUTTON' LAYER AND ASSOCIATED RIGHT CONTENT LAYER ///
// /////// NOTE NAMING PATTERN OF ASSOCIATED tabOpts AND associated tabs and their associated accordion tabs. ////
// /////////////////// ******* SEE FOOTNOTE AT THE BOTTOM ON ASSOCIATED HTML FOR EACH UNIT. ******* /////////////



// [CODE FOR OTHER EXISTING BUTTONS, TABS, AND ASSOCIATED ACCORDION TABS in the js file HAS BEEN 'SNIPPED'
 //   from the present display of code-with-comments]

// WHAT FOLLOWS ARE THE CHANGES MADE TO HTML MARKUP TO ADD OR REMOVE BUTTONS OR TABS OR ACCORDION TABS:
//     (Obviously, you would also change the text in 'buttons', tab heading, accord. tab heading and in the content of each tab and accordion tab to your own.):

// ///// ** FOOTNOTE ** : THIS IS A SAMPLE HTML MARKUP ON THE WEB PAGE FOR A SINGLE LEFT MENU 'BUTTON' and the associated tabs and accordion tabs:
// //// First the left 'button':
// /////// <div class="lmenu" style="position: absolute; left: 3px; top: 17px; width: 90px; height: 33px; z-index: 2; display:block; border-style: solid; border-width: 1px; padding-left: 2px;
// //////      padding-right: 2px; padding-top: 1px; padding-bottom: 1px" id="layer2">
// /////// <p align="center" style="margin-top: 1px; font-size: 11px;">Test Tools/ Slides/Draw/Fun</p>
// /////// </div>
// ///////////////////// Note the Layer numbering of these 'buttons', beginning with: layer2, then layer3, layer4, etc.


// ///// HERE IS THE WAY AN ASSOCIATED RIGHT MENU UNIT BEGINS:
// ///// <div class="rmenu" style="border-style: solid; border-width: 1px; padding: 1px 4px; overflow: hidden; position: absolute; left: 10px; top: 0px; width: 180px; height: 320px;
// /////       z-index: 7; display:none;" id="layer12">  // always the left-div 'button' layer name plus 10

// ///// Following that is the correct naming of the tabs in the html, here, in this example : "myTabsa" and the needed number of tabs headings with the correct values for the <a href
// ///// in each. The ul and lis following the line above actually just represents the Tab Headings & the href="#d0a", similar in each li, correspond to similarly named blocks in code below.
// ////   To reduce (or add to) the number of tabs associated with a given left-hand 'button': trim from the bottom (or add to the bottom) as needed -- but have
// ///// the correct number of associated 25-line units, properly named below those tab heading lines, DESCRIBED AS FOLLOWS:

// ///// THE ABOVE HTML CODE LINE is followed by the correct number of actual tabs containing an accordion each beginning as follows:
// //// <div style="display: block; height: 270px;" class="ui-tabs-panel" id="d0a">11Presently all mockup (bogus) content w/ repeats
// ////              <ul class="ui-accordion" id="myAccordion0a">

// //// This start of a single tab, associated with a single left-hand 'button', is followed by a large block
// //// of standard code (about 25 lines long (counting extra blank lines) which does NOT differ from instance to instance, ending with
// //// </ul>
// ////        </div>
// ////               <!-- END OF DIV d0a -->

// //// The number of accordion tabs can be reduced as needed by eliminating some such inner units from the BOTTOM .  If you add any, add to both the heading ul
// ////    and add a new approx. 25-line block, all following the proper naming pattern (such adding of units is unlikely needed; you are more likely to delete some).

// ////  P.S.  AGAIN: The reason for all the forward slashes, is that I had considered putting all these directions in the js file code itself, as comments.
// ////           I left it commented with the forward slashes in case you wanted to put these directions right into your copy of the js code.