Show / Hide div for image links

[acctman]

I looking for a show/hide div script that will work with my user registration form.

I have two images Male & Female when user clicks either one it should show the reg info within the set div ID (id=male or id=female) and then a third option for a back link that would clear and hide everything back to the main.

i hope that makes sense. i found one div script that displayed the different sections but everything was overlaping each other. i might of been a css issue not sure.

[mburt]

<script type="text/javascript">
var display = function(el) {
  document.getElementById(el)["style"]["display"] = "block";
}, hide = function(el) {
  document.getElementById(el)["style"]["display"] = "none";
};
</script>
<img src="male.jpg" onclick="hide('female');display('male');" alt="male">
<img src="female.jpg" onclick="hide('male');display('female');" alt="female">
<img src="close.jpg" onclick="hide('male');hide('female');" alt="close all"> 
<div id="male" style="width:100px;height:300px;position:absolute;left:10px;top:50px;border:1px solid black;display:none">Male</div>
<div id="female" style="width:100px;height:300px;position:absolute;left:70px;top:50px;border:1px solid black;display:none">Female</div>

I think this is what you mean.

[mburt]

I also wrote this program, a little more complicated but is much more versatile:

<script type="text/javascript">
var s = "style", d = "display", sp = "split",
  b = "block", n = "none", x = "indexOf",
$ = function(e) {
  return document.getElementById(e);
},
display = function(el) {
  var div = el[sp](";"),
    d0 = div[0],
    d1 = div[1];
  if (d0 != "0") {
    if (d0[x](",") == -1) {
      $(d0)[s][d] = b;
    } else {
      var com = d0[sp](",");
      for (var i = 0;i < com.length;i++) {
        $(com[i])[s][d] = b;
      };
    };
  };
  if (d1 != "0") {
    if (d1[x](",") == -1) {
      $(d1)[s][d] = n;
    } else {
     var com = d1[sp](",");
      for (var i = 0;i < com.length;i++) {
        $(com[i])[s][d] = n;
      };
    };
  };
};
</script>
<img src="male.jpg" onclick="display('male;female')" alt="male">
<img src="female.jpg" onclick="display('female;male')" alt="female">
<img src="close.jpg" onclick="display('0;male,female')" alt="close all"> 
<div id="male" style="width:100px;height:300px;position:absolute;left:10px;top:50px;border:1px solid black;display:none">Male</div>
<div id="female" style="width:100px;height:300px;position:absolute;left:70px;top:50px;border:1px solid black;display:none">Female</div>

display() is broken down into two parts separated by the ";".

The first half: display("male,female") is what is displayed, and the second half: display("male,female") is what's hidden.

If you want to only display something, you set the second value to 0:

display("displayThis;0");

As displayed in the example program, you can only hide elements as well. Set the first value to 0:

display("0;male,female");

You can also display or hide several elements separated by a comma:

display("displayThis,and_this;hideThis,also_this");