Hi.

I am having serious problems trying to get this to work.

I have a javascript drop down menu. When I click on the parent, a div with links is made visible. Now, I have put a div inside the div that pops up yet I can only get one to work.

I am using event handlers and a small js script.

Here's a a very small, rearranged script for clarity:

<a onclick="showdiv('div1');">Click Me</a>
<div id="div1>
<!--LINKS-->
<div id="div2"></div>
</div>


<script type="text/javascript">

function showdiv(id)
{    
    if(menudiv) menudiv.style.visibility = 'hidden';

    menudiv = document.getElementById(id);
    menudiv.style.visibility = 'visible';
}
</script>

I have tried to declare several 'ids' in the onclick event handler, like ('div1','div2') but that hasn't worked.

Is there a way to declare several ids like shown above or will I have to alter the js script?

Many thanks,

Damien.

You need to set the variable for menudiv before you check whether it's visible or not.

What's happening is you sent one id into the function and change its visibility to visible. The next time through the function you first check to see if the visibility is hidden, but you're still dealing with the previous id which you've already made visible so the conditional returns false.

Try:

function showdiv(id)
{    
    menudiv = document.getElementById(id);
    if(menudiv) menudiv.style.visibility = 'hidden';
    menudiv.style.visibility = 'visible';
}

Sadly, that hasn't sorted it.

Can I add anything to the function, like a loop, that will ensure everything inside this div is made visible.

I have put an <li> in the div that pops up and the <li> is made visible with the div. Yet when I use a <div> in it's place, nothing.

I have also tried this

onclick="showdiv('div1');showdiv('div2');"

and it only shows the second one.

I would really appreciate it if someone could take a look at the js script:

var menudiv    = 0;


function showdiv(id)
{    

    if(menudiv) menudiv.style.visibility = 'hidden';

    menudiv = document.getElementById(id);
    
    menudiv.style.visibility = 'visible';
}

Can I extend on the function to make everything inside an element visible and not a single id?

Thanks for your help.

Do you have the inner divs visibility set in the css initially? Hiding the outer div should be enough to hide everything inside. From the way you have the html set up I think you only need set the visibility of the outermost div. Don't add any css for visibility to the inner divs.

Hopefully that works.

No. I haven't even set the visibility for the inner div and it's already invisible, so at least the parent div has some control over it. Problem is the inner and outer visible. I can only do one at any one time.

...whoa...I sorted it.

I checked the css and it turns out I was using #wrap div{visibility:hidden;} so any divs under the wrap were invisible. I've now specified it like #wrap #div1{} and it's working fine.

Thanks for prompting me to look deeper into the css. Much obliged.

Glad I could help in some way even if it wasn't to give you an actual solution. Mostly glad you got it working.