DIV Elemente mit JS triggern - Hilfe gesucht

[Lotte]

Hallo!

Ich bin totaler JS Newbie und kann von ganzem Herzen sagen, daß ich auch noch superschlecht im programmieren bin. Also frag ich mal Euch Profis um Rat:

Ich habe ein Menü, welches JS gesteuert DIV Elemente ein bzw. ausblendet. Dabei ist alles darin fest verdrahtet. Da ich nun von diesem Menü noch viele Versionen bauen muß, wäre es toll, wenn der Code das alles flexibler hinkriegen könnte, damit ich das immer gleiche JS nutzen kann. Aber für sowas fehlt mir jeder Ansatz.

Zum Code untenstehend: die IDs der DIVs müssen nicht zwingend erhalten bleiben, ich hab gedacht, vielleicht geht das ja auch besser über getElementByName? Das ganze funktioniert, ist aber super unschön.

Für jede hilfreiched Zeile dankbar
Lotte

<script type="text/javascript">
function toggleMenu(a){
  var e=document.getElementById(a)

footer_opt1 = document.getElementById("footer_opt_1")
  footer_opt2 = document.getElementById("footer_opt_2")
  footer_opt3 = document.getElementById("footer_opt_3")
  footer_opt4 = document.getElementById("footer_opt_4")

footer_opt1.style.display="none"
  footer_opt2.style.display="none"
  footer_opt3.style.display="none"
  footer_opt4.style.display="none"

e.style.display="block"
  return true;
}
</script>

<div id="footer_opt_1">
  Inhalt 1
 </div>

<div id="footer_opt_2" style="display:none">
  Inhalt 2
 </div>

<div id="footer_opt_3" style="display:none">
  Inhalt 3
 </div>

<div id="footer_opt_4" style="display:none">
  Inhalt 4
 </div>

[Dieter Raber]

Hallo Lotte,

Eine Moeglichkeit waere, die div Elemente mit einem weiteren div Element zu umgeben, und dieses als Argument an die Funktion zu uebergeben. Das sieht dann etwa so aus:

<div id="aussen">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</div>

Dein JS waere dann etwa so:

function toggleMenu(aeuseres_element, anzuzeigendes_element)
{
  // erst erzeugst du eine Referenz auf das aeussere Element,
  var aeusseresElement = document.getElementById(aeuseres_element);

// dann auf das anzuzeigende Element,
  var anzuzeigendesElement = document.getElementById(anzuzeigendes_element);

// dann auf die inneren, beachte, dass es hier mit 'aeusseresElement', nicht mit 'document' losgeht
  var alleInneren = aeusseresElement.getElementsByTagName('div')

// dann schleifst du durch die inneren Elemente
  for (var i = 0; i < alleInneren.length; i++)
  {
    alleInneren[i].style.display = 'none';
  }
  anzuzeigendesElement.style.display="block"
  return true;
}

Man kann das natuerlich noch etwas netter machen, aber hier kommt es ja nur auf des Prinzip an.

Gruß,

Dieter