inputing multiple arguments into a function...

[grandeandy]

question: in the code below, and in general, how would I input multiple
functions into the code, and get multiple outputs? basically, I want to
be able to add say 2 or 3 of the div's to the link so that it shows
multiple div's at once.

<script language="javascript">
<!--
var state = 'none';

function hide(layer_ref) {

if (state == 'block') {
state = 'none';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
function show(layer_ref) {

if (state == 'none') {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>
<p><a href="#" onclick="hide('div1');">hide me</a></p>
<p><a href="#" onclick="show('div1');">show me</a></p>
<div id="div1" style="display: none;">This is the content 1</div>
<div id="div2" style="display: none;">This is the content 2</div>
<div id="div3" style="display: none;">This is the content 3</div>

[RobG]

gr********@gmail.com wrote:

question: in the code below, and in general, how would I input multiple
functions into the code, and get multiple outputs? basically, I want to
be able to add say 2 or 3 of the div's to the link so that it shows
multiple div's at once.

<script language="javascript">
Drop the language attribute, it's been depreciated for years. Use
the required type attribute.

<script type="text/javascript">
<!--
No need to hide scripts anymore, though some still defend the
practice.
var state = 'none';
There is no need for this global variable (see below).

function hide(layer_ref) {

if (state == 'block') {
state = 'none';
}
Here you toggle your global variable. As you need only two states
for your div ('none' and ''), you can just toggle the state in the
one function: if it's currently 'none', make it '' and vice versa.

Unless you really need to toggle between 'block' and 'none', just use
'' and 'none'. '' will return the div to it's default.
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
It is good to do feature testing, but why not test for the most
common feature first? Test & use getElementById, then document.all
and finally layers. I suspect that supporting document.layers is no
longer needed, but it's up to you.
}
function show(layer_ref) {
If you just toggle the value of the divs, you don't need this second
function.

[...] }
//-->
No need for hiding any more.
</script>
<p><a href="#" onclick="hide('div1');">hide me</a></p>
the '#' will cause some browsers to scroll back to the top of the
page, which can be annoying, so return false from your onclick.

<p><a href="#" onclick="
hide('div1');
return false;
">hide me</a>
</p>

If you want to pass multiple values to the function:

<p><a href="#" onclick="
hide('div1','div2');
return false;
">hide me</a>
</p>

But then you need some changes in the function (see below)
<p><a href="#" onclick="show('div1');">show me</a></p>
<div id="div1" style="display: none;">This is the content 1</div>
<div id="div2" style="display: none;">This is the content 2</div>
<div id="div3" style="display: none;">This is the content 3</div>

You shouldn't hide things by default, then expose them using
JavaScript, otherwise someone with JS disabled (or a browser that is
incompatible with your JS) will never see the hidden content.

Below is a re-write of your function (I haven't tested the
document.layers stuff). The first one toggles div1, the second takes
as many arguments as you'd like to throw it and it toggles the
elements with the ids passed to it. I dropped support for
document.layers but you could put it back in as per the first
function.

Tested in Firefox and IE.

<script type="text/javascript">
function showHide(layer_ref) {
var hza;
if (document.getElementById) {
hza = document.getElementById(layer_ref);
} else if (document.all) {
hza = document.all['layer_ref'];
}
if (hza && hza.style) {
if (hza.style.display == '') {
hza.style.display = 'none';
return 'Show ' + layer_ref;
} else {
hza.style.display = '';
return 'Hide ' + layer_ref;
}
} else if (document.layers) {
hza = document.layers[layer_ref];
if (hza.display == '') {
hza.display = 'none';
return 'Show ' + layer_ref;
} else {
hza.style.display = '';
return 'Hide ' + layer_ref;
}
}
}

function showHide2() {
var i = arguments.length;
var hza;
while (i--){
if (document.getElementById) {
hza = document.getElementById(arguments[i]);
} else if (document.all) {
hza = document.all[arguments[i]];
}
if (hza && hza.style) {
hza.style.display = (hza.style.display == '')? 'none':'';
}
}
}

</script>
<p><a href="#" onclick="
this.innerHTML = showHide('div1');
return false;
">Hide div1</a></p>
<p><a href="#" onclick="
showHide2('div2','div3');
return false;
">Show/hide div2 & div3</a></p>

<div id="div1">This is the content 1</div>
<div id="div2">This is the content 2</div>
<div id="div3">This is the content 3</div>

--
Rob