For some reason, I can't get the tab panes to show .. the tabs show fine, but the panes are not showing up..
here is the code:
here is the code:
<div class="content-area">
<a href='/raceday/Account/Login'>Log In</a> |
<a href="/raceday/Event/Edit">Create A New Event</a> |
<a href="/raceday/Account/Create">Create A New Account</a> |
<a href="/raceday/Event/List">View Events</a> |
<a href="/raceday/Event/Manage">Events Created By You</a>
<h1>Create A New Raceday Account</h1>
<form action="/raceday/Account/Create" method="post">
<div></div>
<ul class="tabs">
<li><a href="#">Basic</a></li>
<li><a href="#">Detailed</a></li>
</ul>
<div class="panes">
<div>
<label>
Personal Info
<label for="FirstName" id="FirstName_Label">First Name:</label><input class="required" id="FirstName" name="FirstName" type="text" value="" />
<label for="LastName" id="LastName_Label">Last Name:</label><input id="LastName" name="LastName" type="text" value="" /><br />
<label for="Gender" id="Gender_Label">Gender:</label><select class="required" id="Gender" name="Gender"><option value="">Not Specified</option><option value="F">Female</option><option value="M">Male</option></select><br />
<label for="DateOfBirth" id="DateOfBirth_Label">Date of birth:</label><input class="date-input" id="DateOfBirth" name="DateOfBirth" type="text" value="11/15/1999" /><br />
</label>
<label>
Account Details
<label for="EmailAddress" id="EmailAddress_Label">Email:</label><input class="required email" id="EmailAddress" name="EmailAddress" type="text" value="" /><br />
<label for="Password" id="Password_Label">Password:</label><input class="required" id="Password" name="Password" type="password" value="" /><br />
<label for="PasswordConfirmation" id="PasswordConfirmation_Label">Confirm:</label><input class="required" id="PasswordConfirmation" name="PasswordConfirmation" type="password" value="" />
</label>
<p>
<input class="submit" id="Create_Account" name="Create_Account" type="submit" value="Create Account" />
</p>
</div>
<div>
<label>
Address
<label for="Address_Line1" id="Address_Line1_Label">Street Number, Name:</label><input id="Address_Line1" name="Address.Line1" type="text" value="" /><br />
<label for="Address_Line2" id="Address_Line2_Label">Address Line 2:</label><input id="Address_Line2" name="Address.Line2" type="text" value="" /><br />
<label for="Address_CountryId" id="Address_CountryId_Label">Country:</label><select id="Address_CountryId" name="Address.CountryId"><option value="">Select A Country</option><option value="100">Bermuda</option></select><br />
<label for="Address_RegionId" id="Address_RegionId_Label">State, Province or Region:</label><select id="Address_RegionId" name="Address.RegionId"><option value="">Select A Region</option></select><br />
<label for="Address_CityId" id="Address_CityId_Label">City:</label><select id="Address_CityId" name="Address.CityId"><option value="">Select A City</option></select><br />
<label for="Address_PostalCode" id="Address_PostalCode_Label">Postal Code:</label><input id="Address_PostalCode" name="Address.PostalCode" type="text" value="" /><br />
<input id="OnlyShowLocalEvents" name="OnlyShowLocalEvents" type="checkbox" value="true" /><label for="OnlyShowLocalEvents" id="OnlyShowLocalEvents_Label">Show only events from here</label><input id="OnlyShowLocalEvents_Hidden" name="OnlyShowLocalEvents" type="hidden" value="false" />
</label>
<label>
Other Details
<label for="PhoneNumber" id="PhoneNumber_Label">Phone:</label><input id="PhoneNumber" name="PhoneNumber" type="text" value="" />
</label>
<p>
<input class="submit" id="Create_Account" name="Create_Account" type="submit" value="Create Account" />
</p>
</div>
</div>
</form>
<!-- This JavaScript snippet activates those tabs -->
<script>
// perform JavaScript after the document is scriptable.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});
</script>
</div>
<!-- end content -->
/* root element for tabs */
ul.tabs {
list-style:none;
margin:0 !important;
padding:0;
border-bottom:1px solid #666;
height:30px;
}
/* single tab */
ul.tabs li {
float:left;
text-indent:0;
padding:0;
margin:0 !important;
list-style-image:none !important;
}
/* link inside the tab. uses a background image */
ul.tabs a {
background: url(../images/blue.png) no-repeat -420px 0;
font-size:11px;
display:block;
height: 30px;
line-height:30px;
width: 134px;
text-align:center;
text-decoration:none;
color:#333;
padding:0px;
margin:0px;
position:relative;
top:1px;
}
ul.tabs a:active {
outline:none;
}
/* when mouse enters the tab move the background image */
ul.tabs a:hover {
background-position: -420px -31px;
color:#fff;
}
/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
background-position: -420px -62px;
cursor:default !important;
color:#000 !important;
}
/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */
/* width 1 */
ul.tabs a.s { background-position: -553px 0; width:81px; }
ul.tabs a.s:hover { background-position: -553px -31px; }
ul.tabs a.s.current { background-position: -553px -62px; }
/* width 2 */
ul.tabs a.l { background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover { background-position: -248px -31px; }
ul.tabs a.l.current { background-position: -248px -62px; }
/* width 3 */
ul.tabs a.xl { background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover { background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }
/* initially all panes are hidden */
div.panes div.pane {
display:none;
}