divs mit textfeldern ausblenden

[willi]

Hallo Leute,

ich habe folgendes Problem... ich habe 2 divs mit css übereinandergeschmissen, die jeweils 3 textareas enthalten. Mithilfe von Javascript switche ich zwischen den beiden divs und bekomm somit entweder textarea1-3 oder textarea4-6 angezeigt.
Das klappt auch alles wunderbar, nur kann ich in die textareas1-3 nichts reinschreiben... meiner Vermutung nach aus dem Grund, dass das div mit textarea4-6 der Positionierung nach über dem anderen div liegt und somit verhindert, dass ich in die textareas reinklicken kann.

Hier ein Auszug aus dem html code:

<!-- Auswahl (Horizontal/Vertikal) -->

<div id="richtung">
 <a href="javascript:reihe1()">[Reihe1]</a>&nbsp;<a href="javascript:reihe2()">[Reihe2]</a>&nbsp;<a href="javascript:unternander()">[vertikal]</a>&nbsp;
</div>

<br />

<!-- Eingabefelder -->

<form name="eingabe">

<div id="reihe1" class="reihe1">

<div id="feld1" class="da"><textarea name="textarea1">Feld 1</textarea></div>
 <div id="feld2" class="da"><textarea name="textarea2">Feld 2</textarea></div>
 <div id="feld3" class="da"><textarea name="textarea3">Feld 3</textarea></div>

</div>

<div id="reihe2" class="reihe2">

<div id="feld4" class="weg"><textarea name="textarea4">Feld 4</textarea></div>
 <div id="feld5" class="weg"><textarea name="textarea5">Feld 5</textarea></div>
 <div id="feld6" class="weg"><textarea name="textarea6">Feld 6</textarea></div>

</div>

Und hier das Javascript:

<script language="JavaScript">
function reihe1()
{
 document.getElementById('feld1').className = 'da';
 document.getElementById('feld2').className = 'da';
 document.getElementById('feld3').className = 'da';
 document.getElementById('feld4').className = 'weg';
 document.getElementById('feld5').className = 'weg';
 document.getElementById('feld6').className = 'weg';
 document.getElementById('reihe1').className = 'reihe1';
 document.getElementById('reihe2').className = 'reihe2' ;
}

function reihe2()
{
 document.getElementById('feld1').className = 'weg';
 document.getElementById('feld2').className = 'weg';
 document.getElementById('feld3').className = 'weg';
 document.getElementById('feld4').className = 'da';
 document.getElementById('feld5').className = 'da';
 document.getElementById('feld6').className = 'da';
 document.getElementById('reihe1').className = 'reihe1';
 document.getElementById('reihe2').className = 'reihe2';
}

function unternander()
{
 document.getElementById('feld1').className = 'unternander';
 document.getElementById('feld2').className = 'unternander';
 document.getElementById('feld3').className = 'unternander';
 document.getElementById('feld4').className = 'unternander';
 document.getElementById('feld5').className = 'unternander';
 document.getElementById('feld6').className = 'unternander';
 document.getElementById('reihe1').className = 'spalte_oben';
 document.getElementById('reihe2').className = 'spalte_unten';
}
</script>

Und zuguter letzt noch das css (die Definitionen die relevant sind:

.da {
float: left;
visibility: visible;
z-index: 50;
width: 33%;
text-align: center;
display: block;
}

.weg {
float: left;
visibility: hidden;
z-index: 1;
width: 33%;
text-align: center;
display: none;
}

.unternander {
clear:both;
visibility: visible;
float: none;
width: 794px;
height:60px;
text-align:center;
display: block;
}