CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
TMPilot
TMPilot

Reputation: 247

jQuery UI Tabs not hiding inactive tabs on load

I'm having a strange problem with jQuery tabs. The tabs are working fine, but the inactive panels are remaining visible on load, and it's only when selecting other tabs that they are hidden.

Here is my code:

<head>
<link rel="stylesheet" href="css/jquery.ui.all.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>
<script type="text/javascript">
jQuery.noConflict(); 
(function($) {
    $(function() {  
        /* UI Tabs */
        $.fn.tabs && $(".tabs").tabs();
    });
}) (jQuery);
</script>
</head>
<body>
<div class="tabs">
    <ul>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
        <li><a href="#tab-3">Tab 3</a></li>
    </ul>
    <div id="tab-1">
    ...
    </div>
    <div id="tab-2">
    ...
    </div>
    <div id="tab-3">
    ...
    </div>
</div>
</body>

I've not seen this before. Can anyone spot anything I might have missed?

Cheers, RJ

Upvotes: 4

Views: 5623

Answers (3)

geek-merlin
geek-merlin

Reputation: 1890

Add this to your css:

.ui-tabs-hide { 
    display: none !important; 
 }

The !important assures that nothing else will override this.

Upvotes: 0

Racksickle
Racksickle

Reputation: 53

I've been having the same problem. Try adding this exact chuck in your style sheet. 

div .ui-tabs .ui-tabs-hide {
display: none;
}

For some reason I keep getting a style...

div {display: block;}

...that kept overriding my .ui-tabs-hide fix that Ronald provided.

Hope this helps,

Rock

Upvotes: 0

Ronald De Ruiter
Ronald De Ruiter

Reputation: 319

Bit crude as it doesn't address the root of the problem but it sure solved it; i simply added the following to my stylesheet. 

    <style>
        .ui-tabs-hide { display: none; }
    </style>`

Hope it helps someone.

Upvotes: 3

Related Questions