Tabs and hidden content - css

Question

I've tried everything, researched and tooled around but I really don't know CSS that well. I'm trying to have the headings stay the same width then have a transition drop down that has a description but expands wider than the heading section. Something like the example below, but to show and hide content on hover instead of on click.
The example HTML:
<div class="tabContainer" >
<ul class="digiTabs" id="sidebarTabs">
<li id="1" class="selected t">Overview</li>
<li id="2" class="t">Itinerary</li>
<li id="3" class="t">Destination Info</li>
</ul>
<div id="t1" style="display:none;" class="tabContent">...</div>
<div id="t2" style="display:none;" class="tabContent">...</div>
<div id="t3" style="display:none;" class="tabContent">...</div>
</div>
The example CSS:
.tabContainer {margin: 0;}
.tabContainer .digiTabs {
list-style: none;
display: block;
overflow: hidden;
margin: 0;
padding: 0px;
position: relative;
top: 1px;
}
.tabContainer .digiTabs li {
float: left;
background-color: #e7e5df;
padding: 5px 15px!important;
cursor: pointer;
border-bottom:none;
margin-right: 1px;
color: #801350;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
}
.tabContainer .digiTabs .selected {
background-color: #fff;
color: #393939;
border-left: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
}
#tabContent {
padding: 10px;
background-color: #fff;
overflow: hidden;
float: left;
margin-bottom: 10px;
border: 1px solid #e1e1e1;
}
The example JS:
$(function(){
$(".t").bind("click",function(){
$(".tabContent").each(function(){
$(this).hide();
});
var id = $(this).attr("id");
$("#t"+id).show();
});
});
http://jsfiddle.net/NIkhar/NRkL9/2/
Any help would be appreciated.

Answer 1

try that fiddle
you don't need to use each, and I've added selected class handler
$(function(){
$(".t").hover(function(){
$(".tabContent").hide();
$('.t').removeClass('selected');
$(this).addClass('selected');
var id = $(this).attr("id");
$("#t"+id).show();
});
});

Answer 2

Just change this code:
$(function(){
$(".t").bind("click",function(){
$(".tabContent").each(function(){
$(this).hide();
});
var id = $(this).attr("id");
$("#t"+id).show();
});
});
Into this:
$(function(){
$(".t").hover(function() { /* ONLY THIS LINE HAS CHANGED */
$(".tabContent").each(function(){
$(this).hide();
});
var id = $(this).attr("id");
$("#t"+id).show();
});
});