CODEWITHSUNDEEP
javascriptjquery
user1251698
user1251698

Reputation: 2143

jQuery code does not work in tabs

I'm using basic tabs function. If I try to add any other code in any of the tab except first one, it does not seem to work. For example, in following code, I am trying to use a plugin to style the select box. If the select box is in first tab, then it works, if it is in the select tab, then it does not. This is probably because of some jQuery loading sequance, but I cannot find any error in the Firebug console.

Please check this demo to see the error:

http://jsfiddle.net/qpv6x/

Code:

$(document).ready(function () {
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');

    $('#tabs ul li a').click(function () {
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div').hide();
        $(currentTab).show();
        return false;
    });

   $('select.style').customSelect();

});

Upvotes: 0

Views: 208

Answers (1)

Turnip
Turnip

Reputation: 36632

Firstly, customSelect(); cant calculate the correct width for the select because it is hidden. Move $('select.style').customSelect(); to before your $('#tabs div').hide();

$(document).ready(function () {

    $('select.style').customSelect();

    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');

    $('#tabs ul li a').click(function () {
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div').hide();
        $(currentTab).show();
        return false;
    });

});

Secondly give your tab a position:

#tabs div {
    background: #FFFFCC;
    clear: both;
    padding: 15px;
    min-height: 200px;
    position:relative; /* <-- HERE */
}

Works fine for me now in Chrome DEMO

Upvotes: 5

Related Questions