teckn1caLityIf you click on "Usual" and see the "Usual use of tabs" - that's how the one I'm setting up is suppose to function.
http://www.sunsean.com/idTabs/
This is mine - it's displaying fine but not hiding the content under tabs correctly nor when I click the tabs does it appear - it simply scrolls down to the page and displays the tab I clicked on's content.
http://i54.tinypic.com/2m6kb2c.jpg
I can't link you to my site due to it being in development and it's not actually mine, I'm working on it for someone.
Any help to resolve the issue is much appreciated.
IN MY SIDEBAR
<div id="usual1" class="usual">
<ul>
<li><a class="selected" href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tab1">This is tab 1.</div>
<div id="tab2">More content in tab 2.</div>
<div id="tab3">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>IN MY CSS FILE
/* Style for Usual tabs */
.usual {
background: #fff;
color:#111;
width:310px;
margin:8px auto;
}
.usual li { list-style:none; float:left; }
.usual ul a {
display:block;
padding:6px 10px;
text-decoration:none!important;
margin:2px;
margin-left:0;
font:10px Verdana;
text-transform: uppercase;
font-weight: bold;
color:#8c8c8c;
background:#fff;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}
.usual ul a:hover {
color:#000;
background:#ccc;
}
.usual ul a.selected {
margin-bottom:0;
color:#fff;
background: #8c8c8c;
border-bottom:1px solid #fff;
cursor:default;
}
.usual div {
padding:10px 10px 8px 10px;
*padding-top:3px;
*margin-top:-15px;
clear:left;
background: #fff;
font:10pt Georgia;
}
.usual div a { color:#000; font-weight:bold; }
#usual2 { background:#0A0A0A; border:1px solid #1A1A1A; }
#usual2 a { background:#222; }
#usual2 a:hover { background:#000; }
#usual2 a.selected { background:snow; }
#tabs3 { background:#FF9; }IN MY HEADER.PHP before </HEAD>
<script type="text/javascript" src="jquery.idTabs.min.js"></script>
