Question

Hey guys, I want to make a function loop over all elements that have the class of “.block-header-tabs” and do the following:

$(function(){

function cssTabs(){

var firstTab = $(".block-header-tabs").find("a:first");
var firstBlock = $(".block-header-tabs").find("a:first").attr('href');
$(firstBlock).parent().css({position: "relative"});
$(firstBlock).css({position: "absolute", zIndex: "2"})
$(firstBlock).siblings().css({opacity: "0", position: "absolute", top: "0", zIndex: "1"});
$(firstTab).addClass("tab-current");
$(firstTab).siblings().addClass("tab-noncurrent");

}

cssTabs();

$(".block-header-tabs a").click(function(){
    $(this).siblings().removeClass("tab-current").addClass("tab-noncurrent");
    $(this).removeClass("tab-noncurrent").addClass("tab-current")
    var clickedTab = $(this).attr('href');
    $(clickedTab).siblings().css({zIndex: "1"}).stop(0,0).animate({opacity:"0"}, function(){
        $(clickedTab).siblings().css({display:"none"});
    });
    $(clickedTab).css({display:"block", zIndex:"2"}).stop(0,0).animate({opacity:"1"});

    return false;

});

});

here is a link to live example so you can check it out yourselves 🙂
http://dl.dropbox.com/u/2878602/moviezet/index.html

thanks

Answer 1

Hey I resolved this myself, turns out that I cannot use a:first to target the main block if I want to use .each() on it. 🙂 here is the fixed code if anyone is interested:

$(".block-header-tabs").each(function(){
    $($(this).find("a:first").attr('href')).css({position: "absolute", zIndex: "2"})
    $($(this).find("a:first").attr('href')).siblings().css({opacity: "0", position: "absolute", top: "0", zIndex: "1"});
    $($(this).find("a:first").attr('href')).parent().css({position: "relative"});
});

Thanks 😀