Jquery ui tools - tab panes all showing at once

Question

I'm using Jquery tools for my tabs - something's gone wrong which I don't know (as everything was working) .. all the panels are being displayed at once for some reason... here is the code:

<div id="form">
     <ul class="tabs">
        <li><a href="#"><%= GetResourceString( "TabHeaderBasic" ) %></a></li>
        <li><a href="#"><%= GetResourceString( "TabHeaderDetailed" ) %></a></li>
     </ul>

     <div class="panes">              
        <div class="pane">
           <h2><%= GetResourceString( "PersonalInfoHeader" ) %></h2>
           <%= this.TextBox( x => x.FirstName ).LocalizedLabel().LocalizedTitle().Size(35).Required() %>
           <%= this.TextBox( x => x.LastName ).LocalizedLabel().LocalizedTitle().Size(35).Required() %>
           <%= this.ValidationMessage( x => x.LastName ) %>
           <%= this
                 .Select( x => x.Gender )
                 .LocalizedLabel()
                 .LocalizedTitle()
                 .Options( ViewModel.GenderOptions )
                 .Selected(ViewModel.Gender.ToString())
                 .FirstOption("", "Not Specified")
                 .Required() %><br />
           <%= this.DateTextBox( x => x.DateOfBirth ).LocalizedLabel().LocalizedTitle().Required() %>
           <%= this.ValidationMessage( x => x.DateOfBirth  ) %>

           <h2><%= GetResourceString( "AccountDetailsHeader" ) %></h2>
           <%= this.TextBox( x => x.EmailAddress ).LocalizedLabel().LocalizedTitle().Size(35).Required() %>

           <% if ( ViewModel.IsExistingUser ) { %>
              <%= this.Password(x => x.OldPassword).LocalizedLabel().LocalizedTitle().Size(35)%>
           <% } %>

           <%= this.Password(x => x.Password).LocalizedLabel().LocalizedTitle().Size(35)%><br />
           <%= this.Password(x => x.PasswordConfirmation).LocalizedLabel().LocalizedTitle().Size(35)%><br />
           <span class="row">
           <%= this.CheckBox( x => x.AgreesToTermsAndConditions ).LocalizedLabelAfter() %>
           </span><br />
           <% if ( !ViewModel.IsExistingUser ) { %>
              <%= this.CheckBox( x => x.AgreesToTermsAndConditions ).LocalizedLabelAfter().Required() %>
              <%= this.ValidationMessage( x => x.AgreesToTermsAndConditions ) %>
              <%= Html.GenerateCaptcha() %>
              <%= this.ValidationMessage( x => x.CaptchaValid ) %>
           <% } %>

           <p>
              <% if ( ViewModel.IsExistingUser ) { %>
                 <%= this.SubmitButton( GetResourceString( "ButtonSubmitEdit" ) ).Class( "register btn" ) %>
              <% } else { %>
                 <input type="button" class="next btn" value="<%= GetLocalResourceObject("ButtonNext") %>" />
                 <%= this.SubmitButton( GetResourceString("ButtonSubmitBasic") ).Class( "register btn" )%>
              <% } %>
           </p>
        </div>

        <div class="pane">
           <h2><%= GetResourceString( "AddressHeader" ) %></h2>

           <% Html.RenderPartial( "EditAddress", ViewModel.Address ); %>

           <span class="row">
              <%= this.CheckBox( x => x.OnlyShowLocalEvents ).LocalizedLabelAfter().LocalizedTitle() %>
           </span><br />                  

           <h2>Other Details</h2>
           <%= this.TextBox( x => x.PhoneNumber ).LocalizedLabel().LocalizedTitle() %>

           <p>
              <% if ( ViewModel.IsExistingUser ) { %>
                 <%= this.SubmitButton( GetResourceString( "ButtonSubmitEdit" ) ).Class( "register btn" ) %>
              <% } else { %>
                 <input type="button" class="previous btn" value="<%= GetLocalResourceObject("ButtonPrevious") %>" />
                 <%= this.SubmitButton( GetResourceString( "ButtonSubmit" ) ).Class( "register btn" ) %>
              <% } %>
           </p> 
        </div>
     </div>
  </div>

CSS

/* 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 label {
   font-size: 95%;
   font-weight: bold;
   color: #222222;
   line-height: 150%;
   padding-bottom: 3px;
   display:block;
}

/* tab pane styling */
/*div.panes > div.pane*/
div.panes > div.pane
{

   padding: 15px 10px;
   border: 1px solid #999;
   border-top: 0;
   font-size: 14px;
   background: #fff 0 5px;
   height: 100%;
}

initialization code

function initializeWizard() {
//   $("ul.tabs").tabs("div.panes > div");

   $("ul.tabs").tabs("div.panes > div");
   var api = $("ul.tabs").tabs(0);
   $(":input[type='button'].next").click(function() { api.next(); return false; });
   $(":input[type='button'].previous").click(function() { api.prev(); return false; });

}

Answer 1

It can be drastically simplified. You don't need to wrap the individual panes/tabs, and you have to have links directly to ID's.

HTML:

<div id="form">
     <ul class="tabs">
        <li><a href="#Pane1"><%= GetResourceString( "TabHeaderBasic" ) %></a></li>
        <li><a href="#Pane2"><%= GetResourceString( "TabHeaderDetailed" ) %></a></li>
     </ul>
        <div class="pane" id="Pane1">
           <h2><%= GetResourceString( "PersonalInfoHeader" ) %></h2>
           ...
        </div>

        <div class="pane" id="Pane2">
           <h2><%= GetResourceString( "AddressHeader" ) %></h2>
           ...
        </div>
  </div>

JavaScript:

$('#form').tabs();

Answer 2

If you are seeing all of the tab panes at the same time, it may be that you didn't include the stylesheets defined in the 'ui.core.css' file that came with the UI.

This file should be in the same directory as 'ui.tabs.css', which is where the rest of the ".ui-tabs" styles were defined. It may be easier to just use 'ui.all.css'