Question

Hi guys maybe you can help.
I’m building a simple tabbed form using the standard jQuery UI. For a variety of reasons this form will have ~40 hidden divs with all form fields within (I cant have this load via AJAX).

I’ve created a fiddle with a heavily stripped down version of the page. You will see under the “Admin” tab a few things, but nothing will show under the management nor clinical tab. An inspection of the HTML will show that there is indeed content in there however.

This particular code that may be causing the issue is this, specifically the CSS descendant selectors:

    jQuery( '.tabDiv ul li a' ).click(function() {                  /* Create Toggle Function */
    var link = $(this).attr('href'); 
    jQuery( '.navigation' ).removeClass("active").addClass("hidden");
    jQuery( link ).removeClass("hidden").addClass("active");
    return false;
});

But if it is I can’t see why. This page will always run on the latest Chrome browser, so any IE/Firefox issues can be ignored.

Thanks in advance for any help, I’ve learnt a LOT off this site in a very short amount of time.

Answer 1

The only problem is that the text appears below the menu, instead of to the right. Also, only the first 2 items under Management tab have any content.