Jquery srollBar with tab panel

<!-- Start Scroll bar Jquery Code -->
<link rel="stylesheet" type="text/css" media="all" href="css/demoStyles.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/jScrollPane.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<style type="text/css">
.tab {
font-family: arial;
font-size: 13px;
white-space: nowrap;
text-align: center;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
*background: transparent url(admin/images/corner_right_2.gif) scroll no-repeat top right;
border-color: #f0e0d3 ;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
padding-bottom: 5px;
padding-right:6px;
cursor: pointer;
}
.tab1 {
font-family: arial;
font-size: 13px;
white-space: nowrap;
text-align: center;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
*background: transparent url(admin/images/corner_right_1.gif) scroll no-repeat top right;
border-color: #f0e0d3 ;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
padding-bottom: 5px;
padding-right:6px;
cursor: pointer;
}
.tab span {
*background: transparent url(admin/images/bottom-left_2.gif) scroll no-repeat top left;
}
.tab1 span {
*background: transparent url(admin/images/bottom-left_1.gif) scroll no-repeat top left;
}
.tabhold {
background-color:#f0e0d3; /*color of menu #666666*/
color: #6f5139;
font-weight:bold;
}
.tabfocus {
background-color:#f3efe6;
color: #6f5139;
font-weight:bold;
}
.tabcontent {
font-family: arial;
font-size: 12px;


border-style: solid;
border-color: #f0e0d3;
border-width: 1px;


background-color:#f3efe6;
}

#pane2,#pane3,#pane4,#pane5 {
height: 60px;
width:440px;
}

.osX .jScrollPaneTrack {
background: url(admin/images/osx_track.gif) repeat-y;
}
.osX .jScrollPaneDrag {
background: url(admin/images/osx_drag_middle.gif) repeat-y;
}
.osX .jScrollPaneDragTop {
background: url(admin/images/osx_drag_top.gif) no-repeat;
height: 6px;
}
.osX .jScrollPaneDragBottom {
background: url(admin/images/osx_drag_bottom.gif) no-repeat;
height: 7px;
}
.osX a.jScrollArrowUp {
height: 24px;
background: url(admin/images/osx_arrow_up.png) no-repeat 0 -30px;
}
.osX a.jScrollArrowUp:hover {
background-position: 0 0;
}
.osX a.jScrollArrowDown {
height: 24px;
background: url(admin/images/osx_arrow_down.png) no-repeat 0 -30px;
}
.osX a.jScrollArrowDown:hover {
background-position: 0 0;
}
.left .jScrollPaneTrack {
left: 0;
right: auto;
}
.left a.jScrollArrowUp {
left: 0;
right: auto;
}
.left a.jScrollArrowDown {
left: 0;
right: auto;
}


/* IE SPECIFIC HACKED STYLES */
* html .osX .jScrollPaneDragBottom {
bottom: -1px;
}
/* /IE SPECIFIC HACKED STYLES */
</style>
<script type="text/javascript">

$(function()
{
// this initialises the demo scollpanes on the page.
$('#pane2').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
$('#pane3').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
$('#pane4').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
$('#pane5').jScrollPane({showArrows:true, scrollbarWidth: 15, arrowSize: 16});
});

</script>
<!-- End Scroll bar Jquery Code -->
<script type="text/javascript" language="JavaScript"><!--
function ManageTabPanelDisplay() {

var idlist = new Array('tab1focus','tab2focus','tab3focus','tab4focus','tab1ready','tab2ready','tab3ready','tab4ready ','content1','content2','content3','content4');
if(arguments.length < 1) { return; }
for(var i = 0; i < idlist.length; i++) {
var block = false;
for(var ii = 0; ii < arguments.length; ii++) {
if(idlist[i] == arguments[ii]) {
block = true;
break;
}
}
if(block) { document.getElementById(idlist[i]).style.display = "block"; }
else { document.getElementById(idlist[i]).style.display = "none"; }
}
}
//--></script>

<style type="text/css">

</style>

<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td>

<div id="tab1focus" class="tab tabfocus" > <span style="*background: transparent url(admin/images/bottom-left_2.gif) scroll no-repeat top left;"> &nbsp;&nbsp;&nbsp;&nbsp;1stTab&nbsp;&nbsp;</span>
</div>
<div id="tab1ready" class="tab1 tabhold" style="display:none;">
<span style="*background: transparent url(admin/images/bottom-left_1.gif) scroll no-repeat top left; " onclick="ManageTabPanelDisplay('tab1focus','tab2ready','tab3ready','tab4ready','content1')" >&nbsp;&nbsp;&nbsp;&nbsp;1stTab&nbsp;&nbsp;
</span>
</div>
</td>
<td>&nbsp;
</td>
<td>
<div id="tab2focus" class="tab tabfocus" style="display:none;">
<span>&nbsp;&nbsp;&nbsp;&nbsp;2ndTab&nbsp;&nbsp;</span>
</div>
<div id="tab2ready" class="tab1 tabhold" style="display:block;">
<span onclick="ManageTabPanelDisplay('tab1ready','tab2focus','tab3ready','tab4ready','content2')">&nbsp;&nbsp;&nbsp;&nbsp;2ndTab&nbsp;&nbsp;</span>
</div></span>
</td>
<td>&nbsp; </td>
<td>
<div id="tab3focus" class="tab tabfocus" style="display:none;">
<span>&nbsp;&nbsp;&nbsp;&nbsp;3rdTab&nbsp;&nbsp;</span>
</div>
<div id="tab3ready" class="tab1 tabhold" style="display:block;">
<span onclick="ManageTabPanelDisplay('tab1ready','tab2ready','tab3focus','tab4ready','content3')">&nbsp;&nbsp;&nbsp;&nbsp;3rdTab&nbsp;&nbsp;
</div>
</td>
<td>&nbsp; </td>
<td>
<div id="tab4focus" class="tab tabfocus" style="display:none;">
<span>&nbsp;&nbsp;&nbsp;&nbsp;More&nbsp;&nbsp;</span>
</div>
<div id="tab4ready" class="tab1 tabhold" style="display:block;">
<span onclick="ManageTabPanelDisplay('tab1ready','tab2ready','tab3ready','tab4focus','content4')">&nbsp;&nbsp;&nbsp;&nbsp;More&nbsp;&nbsp;
</div>
</td>
<td > &nbsp;</td>
</tr>
<tr >
<td colspan="8" >

<div id="content1" class="holder osX tabcontent" >
<div id="pane2" >
www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
</div>
</div>
<div id="content2" class="holder osX tabcontent" >
<div id="pane3">
www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
www.google .com www.google .com www.google .com www.google .com
www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
</div>
</div>
<div id="content3" class="holder osX tabcontent" >
<div id="pane4">
www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
www.google .com www.google .com www.google .com www.google .com
www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
</div>
</div>
<div id="content4" class="holder osX tabcontent" >
<div id="pane5">
www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
www.google .com www.google .com www.google .com www.google .com
www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com www.google .com
</div>
</div>

</td></tr>
</table>

I am trying jQuery scroll bar with tab panel

http://www.kelvinluck.com/assets/jquery/jScrollPane/examples.html
#pane2

now every thing is fine except one thing ... on default position all scroll pane's are coming

when I change "display: none " it is not displaying anything


any one plz sugest ...
Y dont try this on ur pc to solve it
just copy paste above post , code and look at this website tooo
http://www.kelvinluck.com/assets/jquery/jScrollPane/examples.html

any kind of help would be appreciated.....
advanced thanks