Question

So, I created a tabbed interface using java script, jQuery, and CSS in which I simply call .show() and .hide() on div’s that contain a tab’s contents. All of which works perfectly fine; however, one of the tabs requires the user of a Date Picker (I’ve tried this using both a jQuery and the AjaxToolkit DatePickers).

The date picker is attached to an input on the third tab, and will show when the box is pressed (as is expected) the first time I go to the third tab; however, subsequent times in which the third tab is shown, clicking on the date picker input simply has no effect.

The java script that controls the tabs is below:

$(document).ready(function () {
    // initialize the first tab as selected
    $('#tabMenu > li:eq(0)').css('backgroundColor', '#E9E6D7')
    $('#tabMenu > li:eq(0)').addClass('selected');

    // hide all of the tabs but the first
    $('.tabBoxBody div').hide();
    $('.tabBoxBody div:eq(0)').show();

    // whenever a list item in the tab bar is clicked
    $('#tabMenu > li').click(function () {

        // make sure the tab isn't already selected
        if (!$(this).hasClass('selected')) {

            // remove selected from the old tab and add it to the new
            $('#tabMenu > li').removeClass('selected');
            $(this).addClass('selected');

            // hide the old tab's contents and show the new one's
            $('.tabBoxBody div').hide();
            $('.tabBoxBody div:eq(' + $('#tabMenu > li').index(this) + ')').show()

            // clear all background colors and set the new tab's color
            $('#tabMenu > li').css('backgroundColor', '#C2CBDA')
            $(this).css('backgroundColor', '#E9E6D7')
        }

    })

Any help or insight into why this is the case would be greatly appreciated.

Thanks,
Chris

Answer 1

$('.tabBoxBody div').hide();

I think this line affects the divs that form the datepicker.

You could add a class ‘tab’ to your div and then just

$('.tabBoxBody .tab').hide();