Jquery showing matching content when page loads
<p>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 .</p>

<p>Here is what I have for my Jquery:</p>

<pre><code>$(".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");
        }
    });
});
</code></pre>
