Help: Visibility & Nested Divs

[adam_v]

Hi,

I am building a custom set of menus generated using the spry framework for ajax for a client's website. The navigation occurs all in one page through a combination of ajax scripting and javascript/css to build layered, multiple level menus.

here's a WIP version to get you acquatined

http://www.adamvana.com/mdeas

When you click the major tabs (profile/projects/features/contact), it opens up a menu in the negative space. From here, some of these menu items lead to submenus. The submenus load in the same area of the page. (in the WIP only the projects>buildings path works)

The concept of the navigation is to remain static - that is I don't want the menus to disappear onmouseout or appear on mouseover - everything is done through clicks, as if it were separate pages, but it is really one page with xml generated dynamic content.


Now, when you click a different menu I want all menu divs to be hidden except the chosen menu. However, I want to do this intelligently, without turning off every single div with a separate line of code.

So i have the top level submenu divs nested within one "top level" div, and then the deeper level submenus are nested within their own divs. Then I want to hide these levels of divs all at once by hiding the outer div when I navigate to the other level.

But for whatever reason when my script hides the outer div the inner divs stay visible.


So I guess I am looking for a way to fix this so when you hide the outer div all the inner divs hide as well (i can't use inherit because they need to act on their own as well) I want to avoid this situation of manually hiding every individual div:

  	<div class="nav1">
        <img 
        style="cursor:pointer" 
        src="images/nav_profile.jpg" 
        alt="PROFILE" 
        name="img_profile" 
        width="30" 
        height="100" 
        border="0" 
        id="profile" 
        onclick="
            swapImage('projects','','images/nav_projects.jpg',1);	
            swapImage('features','','images/nav_features.jpg',1);	
            swapImage('contact','','images/nav_contact.jpg',1);	
			changeProp('m_profile','','visibility','visible','DIV'); 
            changeProp('m_projects','','visibility','hidden','DIV');
            changeProp('m_features','','visibility','hidden','DIV');
            changeProp('m_contact','','visibility','hidden','DIV');
            changeProp('m_commercial','','visibility','hidden','DIV');
            changeProp('m_institutional','','visibility','hidden','DIV');
			changeProp('m_residential','','visibility','hidden','DIV');
			changeProp('m_corporate','','visibility','hidden','DIV');
            changeProp('info_commercial','','visibility','hidden','DIV');
            changeProp('info_institutional','','visibility','hidden','DIV');
            changeProp('info_residential','','visibility','hidden','DIV');
            changeProp('info_corporate','','visibility','hidden','DIV');
            changeProp('info','','visibility','hidden','DIV');"
        onmouseover="
            swapImage('profile','','images/nav_profile_over.jpg',1)" 
        onmouseout="
            testRestore('m_profile')"
        />

if you could recommend a way to script this simply it would be helpful

-adam

[markbrown4]

You'll get more feedback if you post your question in the appropriate forum -> javascript forum

[adam_v]

is it ok if I cross-post? it concerns both css and javascript

[r937]

no, it's better to ask to have the thread moved

because if you start another, we'll often just merge the two threads, which can get quite confusing if both threads have received replies