Question

I have a a particular page that I am showing two diff items on and when you click one of the items the content on the page switch’s to that particular items info and hides the other items info. SO its pretty much a tab system in simple terms but my problem is that i would like to show the by default the first items info and right now all my content is hiddn until i click one of the two items .

Here is what I have for my Jquery:

$(".packBat:first").addClass("active");
$(".showWraps").hide();
$(".packBat .photoWrap").click(function () {
    var batpackData = $(this).closest('.packBat').metadata({
        type: 'attr',
        name: 'data'
    });
    $(".packBat").removeClass("active");
    $(this).closest('.packBat').addClass("active");
    $('.showWraps').hide();
    $('.showWraps').each(function () {
        var wrapData = $(this).metadata({
            type: 'attr',
            name: 'data'
        });
        if (wrapData.productId == batpackData.productId) {
            $(this).fadeIn("fast");
        }
    });
});

Answer 1

After you bind the click listener that selects the tab, just .click() the one you want.

$(".packBat .photoWrap").click(function () {
    // snip
}).first().click();

---

one other quick question say i want to to stop the fadin if people are already on the items content, because right now if you click an item that its content is already showing you get a quick flash but the conent dosent change because its already the right content

Here’s the solution, along with some other cleanup:

var metaArgs = {type: 'attr', name: 'data'},
    ACTIVE = 'active';

$(".packBat .photoWrap").click(function () {
    var $this = $(this),
        $closest = $this.closest('.packBat');

    // no need to continue if the right one is already showing
    if ($closest.hasClass(ACTIVE)) return;

    var batpackData = $closest.metadata(metaArgs);

    $closest.addClass(ACTIVE).siblings().removeClass(ACTIVE);

    $('.showWraps').hide().each(function () {
        var wrapData = $(this).metadata(metaArgs);
        if (wrapData.productId == batpackData.productId) $(this).fadeIn("fast");
        return false; // cancel further iteration
    });
}).first().click();