Ok I'm having a problem trying to accomplish what I'm trying to do.

I have 5 tabs that when clicked on display information below them. However my problem is the tabs change when clicked on to a new bg image position. Here is my current function I coded:

function updateService(current_id) {
    current_id_content = current_id+'_content';
    var tabs = new Array(5);
    
    tabs[0] = "s_design";
    tabs[1] = "s_coding";
    tabs[2] = "s_branding";
    tabs[3] = "s_marketing";
    tabs[4] = "s_multimedia";
    
    
    for(x = 0; x < 5; x++) {
        old_id = tabs[x];
        content_id = old_id+'_content';
        
        alert('Displaying: '+tabs[x]);
        
        document.getElementById(tabs[x]).style.display = 'inline';
        
        if (document.getElementById(content_id).style.display == 'inline') {
        
            document.getElementbyId(tabs[x]).style.backgroundPosition = 'center';
            document.getElementById(tabs[x]).style.borderBottom = '1px solid #cfcfcf';
            document.getElementById(content_id).style.style.display = 'none';
            
            document.getElementById(current_id).style.backgroundPosition = 'bottom';
            document.getElementById(current_id).style.borderBottom = '0';
            document.getElementById(current_id_content).style.display = 'inline';
            return;
        }
    }
}

(Ignore the alert's it was for debugging purposes only)

I tried doing it that way because I'm not sure how I would loop through the elements of the main parent. (These are children in a parent container)

if there is, would it be: document.parentElement.div.style.display; ?

I'm not sure where to go with this.

Anyways, my problem with the above script is that it is treating them as a literal string instead of an actual id name.

http://www.greenbuildingfest.com/Jav...ndar_ff_mod.js

It's a bit messy but it does illustrate in a few spots how to loop through child nodes.

Play with that. It might help you. It won't work as your answer (I used it to create a calendar with popup divs) but it probably will get you started.

Well I came up with a sorta solution...it's not completely done ...I'm having issues with making the current content hidden...it's saying the display has no properties.

function updateService(current_id) {
    var tabs = new Array('s_design','s_coding','s_branding','s_marketing','s_multimedia');
    
    for(x = 0; x < tabs.length; x++) {            
        
        if (tabs[x] != current_id.id) {
            var tabs_content = document.getElementById(tabs[x]+'_content');
            document.getElementById(tabs[x]).style.backgroundPosition = 'center';
            document.getElementById(tabs[x]).style.borderBottom = '1px solid #cfcfcf';
            tabs_content.style.display = 'hidden';
        }
            
    }
    
    var c_id_content = document.getElementById(current_id.id+'_content');
    
    current_id.style.backgroundPosition = 'bottom';
    current_id.style.borderBottom = '0';
    c_id_content.style.display = 'inline';
}

I'll make a seperate post for this...but my mistake was a very small one. There is no property: hidden for display...that's for visibility. I switched hidden with none and everythign worked. Also I had to make sure my div's were explicitly set.

If I'm reading that code correctly, it looks like you're using the Javascript to hide the tabs initially.

Why not do that in CSS?

http://sephroth.no-ip.info/nvision3/

There is the example of what I am trying to do. I do use some css, but if it is not set explicitly it doesn't work for some odd reason so I did it that way.

I use the :hover for the mouse over's instead of actually using onMouseOver, etc. however I did need javascript to make sure the current tabs were correct, etc. (You have to click the tabs for the information to show up)