Its my code, all files are in the root of the test2.html (all the files are from jQuery tablesorter-master and jquery-ui-1.10.2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test2 table and collapse</title>
<!-- jQuery -->
<script src="jquery.js"></script> <!-- Ok root -->
<!-- Demo stuff -->
<link rel="stylesheet" href="jq.css">
<link href="prettify.css" rel="stylesheet">
<script src="prettify.js"></script>
<script src="docs.js"></script>
<!-- Tablesorter: theme -->
<link class="ui-theme" rel="stylesheet" href="jquery-ui.css"> <!-- Ok root -->
<link class="ui-theme" rel="stylesheet" href="theme.jui.css"> <!-- Ok root -->
<link class="theme" rel="stylesheet" href="theme.default.css">
<link class="theme" rel="stylesheet" href="theme.blue.css">
<link class="theme" rel="stylesheet" href="theme.green.css">
<link class="theme" rel="stylesheet" href="theme.grey.css">
<link class="theme" rel="stylesheet" href="theme.ice.css">
<link class="theme" rel="stylesheet" href="theme.black-ice.css">
<link class="theme" rel="stylesheet" href="theme.dark.css">
<link class="theme" rel="stylesheet" href="theme.dropbox.css">
<!-- #2 table -->
<style id="css">/* wrapper of table 2 */
.wrapper {
position: relative;
top: 50px;
height: 250px;
overflow-x: auto;
}</style>
<!-- Tablesorter script: required -->
<script src="jquery.tablesorter.js"></script>
<script src="jquery.tablesorter.widgets.js"></script>
<script src="widgets/widget-cssStickyHeaders.js"></script>
<!-- colapse -->
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.accordion.js"></script>
<script id="js">$(function(){
var options = {
widthFixed : true,
showProcessing: true,
headerTemplate: '{content} {icon}', // Add icon for jui theme; new in v2.7!
widgets: [ 'uitheme', 'zebra', 'cssStickyHeaders', 'filter' ],
widgetOptions: {
cssStickyHeaders_offset : 0,
cssStickyHeaders_addCaption : true,
cssStickyHeaders_attachTo : null
}
};
$("#table1").tablesorter(options);
/* make second table scroll within its wrapper */
options.widgetOptions.cssStickyHeaders_attachTo = '.wrapper' // or $('.wrapper')
$("#table2").tablesorter(options);
});</script>
<script>
$(function() {
$('link.theme, link.ui-theme').each(function(){ this.disabled = true; });
var themes = 'default blue green grey ice black-ice dark dropbox',
i, o = '', t = themes.split(' ');
for (i = 0; i < t.length; i++) {
o += '<option>' + t[i] + '</option>';
}
$('select:first')
.append(o)
.change(function(){
var theme = $(this).val().toLowerCase(),
name = theme === 'jui' ? 'ui' : 'theme.' + theme,
// ui-theme is added by the themeswitcher
files = $('link.theme, link.ui-theme').each(function(){
this.disabled = true;
})
files.filter('[href$="' + name + '.css"]').each(function(){
this.disabled = false;
});
$('table')
.removeClass('tablesorter-' + t.join(' tablesorter-') + ' tablesorter-jui')
.addClass('tablesorter-' + theme.replace(/-/,''));
}).change();
});
</script>
<!-- colapse -->
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true
});
});
</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>CSS Sticky Header Widget</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<!-- collapse start -->
<h1>Collapse</h1>
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-accordion-accordion-header-0" aria-controls="ui-accordion-accordion-panel-0" aria-selected="true" tabindex="0">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">
</span>Section 1</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="ui-accordion-accordion-panel-0" aria-labelledby="ui-accordion-accordion-header-0" role="tabpanel" aria-expanded="true" aria-hidden="false" style="display: block; height: 103px;">
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-accordion-accordion-header-1" aria-controls="ui-accordion-accordion-panel-1" aria-selected="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e">
</span>Section 2</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-accordion-panel-1" aria-labelledby="ui-accordion-accordion-header-1" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none; height: 103px;">
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
</div>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-accordion-accordion-header-2" aria-controls="ui-accordion-accordion-panel-2" aria-selected="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e">
</span>Section 3</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-accordion-panel-2" aria-labelledby="ui-accordion-accordion-header-2" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none; height: 103px;">
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-accordion-accordion-header-3" aria-controls="ui-accordion-accordion-panel-3" aria-selected="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e">
</span>Section 4</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-accordion-panel-3" aria-labelledby="ui-accordion-accordion-header-3" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none; height: 103px;">
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
</div>
<!-- collapse end -->
<br>
<h1>Demo</h1>
Choose Theme:
<select>
<option value="jui">Jquery UI</option>
</select>
<br><br>
<h1>Attach sticky header to browser window</h1>
<table id="table1" class="tablesorter">
<caption>Student Grades</caption>
<thead>
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th class="filter-false sorter-false">Geometry</th></tr>
</thead>
<tfoot>
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
</tfoot>
<tbody>
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
</tbody>
</table>
<h1>Attach sticky header to its parent</h1>
<div class="narrow-block wrapper">
<table id="table2" class="tablesorter">
<caption>Student Grades</caption>
<thead>
<tr><th>Account #</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
</thead>
<tbody>
<tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
<tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
<tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>15.49</td><td>44.2%</td><td>-13</td></tr>
<tr><td>A11</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
<tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>153.19</td><td>23%</td><td>+9</td></tr>
</tbody>
</table>
</div>
<div class="spacer"></div>
</div>
</body>
</html>