<script type="text/javascript" src="scripts/ui.core.js"></script>
<script type="text/javascript" src="scripts/ui.tabs.js"></script>

<link rel="stylesheet" href="ui.core.css" type="text/css">
<link rel="stylesheet" href="ui.tabs.css" type="text/css">
<link rel="stylesheet" href="ui.theme.css" type="text/css">


$("#divall").tabs();


<div id="divall">
<ul>
<li><a href="#catalog"><span>Browsing the Catalog</span></a></li>
<li><a href="#maplab"><span>Using the MapLab</span></a></li>
<li><a href="#services"><span>Connecting to Map Services</span></a></li>
<li><a href="#7zip"><span>What is 7zip</span></a></li>
</ul>

<div id="catalog">
  Put here help for browsing the catalog...
</div>  

<div id="maplab">
  Put here help for using the MapLab...
</div>  

...

</div>  ends divall element

No additional libraries (other than jQuery core) needed.

function closebox() {
   $("div#resultsdiv").slideUp("slow");

   document.getElementById('searchdiv').innerHTML = 
          "<div id='searchbuttondiv' onclick='javascript:ajaxFunction();'>Place Name Search</div> 
		       <input type='text' size='25' maxlength='50' id='qname' value='Newark' />";

   document.getElementById('searchbuttondiv').style.width = "125px";
}

function openbox() {
   $("div#resultsdiv").slideDown("slow");
   
   document.getElementById('searchdiv').innerHTML = 
           "<div id='searchbuttondiv' onclick='javascript:closebox();'>Close or Begin New Search</div>";
   document.getElementById('searchbuttondiv').style.width = "316px";
}

function ajaxFunction() {
   ...
   openbox();
   ...
}


<div id='searchdiv'>
  <div id="searchbuttondiv" onclick="javascript:ajaxFunction();">Place Name Search</div>
  <input type='text' size='25' maxlength="50" id='qname' value='Newark' />
</div>
<div id="resultsdiv">..results of AJAX db query placed here...</div>

<script type="text/javascript" src="scripts/jquery.gradient.min.js"></script>

$('#header').gradient({
	from:      '6666ff',
	to:        'eeeeff',
	direction: 'horizontal'
});

<div id="header">DataMIL Tile-based Distribution</div>

<script type="text/javascript" src="scripts/jquery.cycle.all.pack.js"></script>

tabmenu = new Array("Map Tiles  | ", "Ortho Info  | ", "jQuery  | ", "Need Help?");

$.fn.cycle.defaults.timeout = 4000;
$(function() {

    var bc = $('#tabmenubar');

    var $container = $('#divall').cycle({ 
        fx: 'scrollHorz',
        speed: 500,
        timeout: 0,
		before:  onBefore, 
		after:   onAfter 
    });

    $container.children().each(function(i) {
        $(''+tabmenu[i]+'')
            .appendTo(bc).click(function() {
                $container.cycle(i);
                return false;
            });
    });
});

<div id="tabmenubar"></div>

<script type="text/javascript" src="scripts/jquery.dimensions.min.js"></script>
function onAfter() { 
    //this runs after slide is complete
	resetPage();
	this.style.overflow="auto";
}

function resetPage() {
	document.getElementById("orthos").style.height = eval($(window).height() - $('#header').height() - 28) + "px";
	document.getElementById("divall").style.height = eval($(window).height() - $('#header').height() - 15) + "px";

	document.getElementById("orthos").style.width = eval($(window).width() - 20) + "px";
	document.getElementById("divall").style.width = eval($(window).width() - 3) + "px";	
}

<script type="text/javascript" src="scripts/jkpanel.js"></script>

jkpanel.init('panelcontent.html', '250px', 500);
//inside jkpanel.js file

<script type="text/javascript" src="scripts/ui.core.min.js"></script>
<script type="text/javascript" src="scripts/ui.draggable.min.js"></script>
<script type="text/javascript" src="scripts/ui.resizable.min.js"></script>

$("#data").draggable();
$("#data").resizable();

document.getElementById("dataclick").innerHTML = 'Clicked: '+ latlng.y.toFixed(5) + ',' + latlng.x.toFixed(5);
document.getElementById("datacoords").innerHTML = 'Coords: '+ point.y.toFixed(5) + ',' + point.x.toFixed(5);

<div id="data">Cursor Coordinates:<br>
  <div id="datacoords"></div>
  <div id="dataclick"></div>
</div>
	

<script type="text/javascript" src="scripts/jquery.boxy.js"></script>

$('#wms2002').click(function() {
  Boxy.alert("Delaware 2002 WMS Service <img src=http://datamil.delaware.gov/wmsconnector/
  com.esri.wms.Esrimap?BBOX=-75.8848418751,38.3741058231,-74.9910505743,39.8758934247&WIDTH=300&HEIGHT=400&
  SRS=EPSG:4326&Layers=ortho2002,&version=1.1.1&service=WMS&FORMAT=JPEG&TRANSPARENT=TRUE&request=getmap&
  ServiceName=DE_aerial02'>", null, {y: 10, title: 'WMS GetMap Request'});
  
  return false;
});

<div id="wms2002" class="wms">WMS Service GetMap Request</div>

<script type="text/javascript" src="scripts/jquery.tablesorter.js"></script>
<link rel="stylesheet" href="scripts/tablesorter_blue/style.css" type="text/css" />

$("#orthotable").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});

<table id="orthotable" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
...
...