Creating 2 'tabs' table in a single page

[genzedu777]

Hi,

 

I have an issue here, i'm trying to create 2 different tables, with 'tabs buttons' function in a single page, however the 'tabs buttons' function seems to work for the first table, but not for the 2nd one. By the way, I am using jquery to do it. Below are my codes and the attachment is to portray a clearer explanation. Thank you

 

<!-------------------------This is the first table, it works perfectly fine----------------->

<ul id="tabSet">

<li><a href="#panel1">Tab 1</a></li>

<li><a href="#panel2">Tab 2</a></li>

<li><a href="#panel3">Tab 3</a></li>

</ul>

 

<div id="panel1">

    <span class="txt-body-bold">Your Faculty, Major and Minor in which course:</span>

</div>

 

<div id="panel2">

    <span class="txt-body-bold">Your Faculty, Major and Minor in which course:</span>

</div>

 

<div id="panel3">

    <span class="txt-body-bold">Your Faculty, Major and Minor in which course:</span>

</div>

 

 

<!---Now when I duplicate the code to create a 2nd table, the tabs function does not work----->

<ul id="tabSet2">

<li><a href="#panel4">Tab 4</a></li>

<li><a href="#panel5">Tab 5</a></li>

<li><a href="#panel6">Tab 6</a></li>

</ul>

 

<div id="panel4">

    <span class="txt-body-bold">Your Faculty, Major and Minor in which course:</span>

</div>

 

<div id="panel5">

    <span class="txt-body-bold">Your Faculty, Major and Minor in which course:</span>

</div>

 

<div id="panel6">

    <span class="txt-body-bold">Your Faculty, Major and Minor in which course:</span>

</div>

 

 

<!---This is the jquery code which I am using, I suspect I have to edit something here, any advice?----->

 

/* style for hiding panels */

.ui-tabs-hide {

display: none;

}

/* for ul holding tab li elements */

.ui-tabs-nav {

margin: 0;

padding: 0;

list-style: none;

zoom: 1;

}

/* tabs */

.ui-tabs-nav li {

padding: 0;

margin: 0 5px 0 0;

float: left;

}

/* style link inside tab */

.ui-tabs-nav a {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-weight: bold;

color: #FFF;

text-decoration: none;

display: block;

padding: 5px 15px 3px 15px;

border: 1px solid #999;

border-bottom: none;

background: url(../../images/shade.gif);

}

/* link style for selected tab */

.ui-tabs-selected a {

color: #000;

background: url(../../images/shadeactive.gif);

position: relative; /*position to overlap panel to remove border line between panel and tab */

top: 1px;

}

/* remove outline around link of selected tab */

.ui-tabs-nav a:focus {

  outline: none;

}

/*panel style*/

.ui-tabs-panel {

clear: left;

border: 1px solid #999;

margin: 0;

padding: 10px;

background: #FFFFFF;

width: 700px;

}

 

[attachment deleted by admin]

[brianlange]

Can you post your javascript code?

[genzedu777]

Hi Brian,

 

Thanks, I have actually found my mistakes. Thanks