Show/Hide All Divs, with exceptions

[gawotn]

<<code start from previous thread>>
Ok you use abosulety positioning in a div and my advice as well is to set all the divs as visibility:invisible; as default except for one category

<script language=javascript type='text/javascript'>

function showDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="visible";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.divs[i].visibility = 'visible';
} else {
if (document.getElementById)
divs[i].style.visibility="hidden";
else
if (document.layers) // Netscape 4
document.divs[i].visibility = 'hidden';
else // IE 4
document.all.divs[i].visibility = 'hidden';
}
}
}

</script>

This script will show the div you pass to it and hide the rest.

Your links to hide show div

<a href="javascript:showDiv('F256')">show 256 Div hide rest</a>
<a href="javascript:showDiv('F512')"> show 512 Div hide rest</a>

Your Divs with abosulte positioning and required other properties set to what you like of course.

<div id="F2561" style="position: absolute; left:5px; top:54px; background-color: #0093DD; border: 1px none #000000; visibility: hidden">
256 Here </div>

<div id="F512" style="position: absolute; left:5px; top:54px; background-color: #0093DD; border: 1px none #000000" >
512 Here
</div>

You can see that the 256 is set to invisible, wont be shown until the link is pressed to show it.

regards,
Mark
<<code end from previous thread>>

The above makes sense for me to use. However, the "hide all" code also hides the div that I have above my content for my header <id = header> and also for my footer div below my content <id = header>.

Is there a way to make the code above "hide all", with the exception of the header & footer divs?

Or, only "hide all" divs in a group (ie: div a1, a2, etc)?

[Bernard Marx]

Some dodgy script there. It won't work in NN4, even though it tries to (visibility property in NN4 is "hide").

Can you give us some idea of the HTML involved - including the ids / classes. The code can be quite simple if simple toggling is what you want. If it is by groups, it could be more involved.

Do you need to support V4 browsers?

[gawotn]

I was looking for something that displayed one div right off, with the others hidden until each link was clicked on. Actually, here's what I've now found, and it's working! Although, your professional opinion would be appreciated :))

ps: I don't have to support ver 4 browsers (except with a message that they need to upgrade!)

the code /////////
<script language=javascript type='text/javascript'>
function show_div(div_id) {
// hide all the divs
document.getElementById('div_1').style.display = 'none';
document.getElementById('div_2').style.display = 'none';

// show the requested div
document.getElementById(div_id).style.display = 'block';
}
</script>

the divs///////////
<div style="visibility: show" id="div_1">
content
</div>
<div style="display: none;" id="div_2">
content
</div>

the links//////////////
<a href="" onclick="show_div('div_1'); return false;">link description1</a>
<a href="" onclick="show_div('div_2'); return false;">link description1</a>

[Bernard Marx]

First, I should mention that

show

isn't a valid visibility property (should be

visible

). Might as well remove it; it's not doing anything.

The toggling is OK. It's not the best though. The function refers to all the elements involved specifically, and will need to be altered if you add or remove elements - a bad sign.

Try this. The calls can remain the same.

/* Initial id in global var */
var currId = 'div_1';
//
function show_div(div_id) { 
    if(currId)
        document.getElementById(currId).style.display = 'none';
    document.getElementById(currId).style.display = 'block';
    currId = div_id;
} 

The check,

if(currId)

, isn't currently needed. You can take it away if there will always be an initial div shown.

[gawotn]

Thanks for looking at this!

Great points, because I was going to use the same code in an external js file, and some pages might have div 1-3+ that need to be addressed, but some might just have 1&3, and not 2. I hadn't tested it out yet as to whether if a div was missing from the page, if it would break the code or not. This way (since I'll always have a div1 on the page), if other divs are missing, it won't matter to the code.

I'll make the changes, try it, then post the modified code back for however else needs to do something similar :))

[gawotn]

Hmmm... I tried the code that you suggested below and it didn't work? No script errors, it's just that the links didn't work. Everything stayed on page as first loaded, with the links not substituting the new content.

Did I misunderstand your message?

the code ///////// (what you had suggested)
<script language=javascript type='text/javascript'>
/* Initial id in global var */
var currId = 'div_1';
//
function show_div(div_id) {
if(currId)
document.getElementById(currId).style.display = 'none';
document.getElementById(currId).style.display = 'block';
currId = div_id;
}
</script>
the divs/////////// (changed visibility to visible)
<div style="visibility: visible" id="div_1">
content 1
</div>
<div style="display: none;" id="div_2">
content 2
</div>
the links////////////// (same)
<a href="" onclick="show_div('div_1'); return false;">link description1</a>
<a href="" onclick="show_div('div_2'); return false;">link description2</a>

[Bernard Marx]

Sorry. I made a hasty copy 'n' paste error.
The 3rd line in the function should reference the input id:

document.getElementById(div_id).style.display = 'block';

[gawotn]

Perfect!
Thanks