Question

I have tabs that display all panels while loading. Although it reverts to showing only default one but it is creating problems in an iframe height setting. After some searching I found this jquery. First hiding the other panels with css

.hide { position: absolute; top: -9999px; left: -9999px; }

And jquery to replace hide class is

    // Accessible hiding fix
        $(".hide").css({
            "position": "relative",
            "top": 0,
            "left": 0,
            "display": "none"
        }); 

At first it appears good, but after switching tabs it displays panel contents together. So whichever tab is clicked the third time, it mixes all content with the previous tab

I am not sure what to do here. Here is link to the full page.
http://tinyurl.com/c5nhet5

How should I fix the code to get rid of this?

Answer 1

You should just remove the hide class rather than trying to override what it does.

$("#tabs").tabs();
$(".hide").removeClass("hide");