✔ Mehrere DIVs untereinander

[Moritz123]

Hallo!

ich habe ein Formular, in dem sich in Abhängigkeit zu an/abgehakten Checkboxen Formfelder in DIVs ein/ausblenden lassen. Das swappen mache ich mittels des folgenden kleinen JavaScripts:

function swap(targetID) {
  if(document.getElementById(targetID).style.display == 'none'){
  	document.getElementById(targetID).style.display = 'block';
  }
  else{
  	document.getElementById(targetID).style.display = 'none';
  }
}

Die Checkboxen sehen wie folgt aus:

<input type="checkbox" name="daemmart[]" value="zwischensparren" onClick="swap('zwischensparren');"> Zwischensparren<br/>
		<input type="checkbox" name="daemmart[]" value="aufdachdaemmung" onClick="swap('aufdachdaemmung');"> Aufdachd&auml;mmung<br/>
		<input type="checkbox" name="daemmart[]" value="trennwand" onClick="swap('trennwand');"> Trennwand<br/>
		<input type="checkbox" name="daemmart[]" value="aussenwand" onClick="swap('aussenwand');"> Au&szlig;enwand

und die DIVs dann so:

<div id="zwischensparren" style="display: none;">DIVINHALT</div>
<div id="aufdachdaemmung" style="display: none">DIVINHALT</div>
<div id="trennwand" style="display: none;">DIVINHALT</div>
...

Nun zum Problem:
Wenn ich die DIVs "aktiviere" legen Sie sich übereinander, was den Text unlesbar macht. Daher dachte ich, ich lege einfach einen margin-top fest. Das führt zwar zum gewünschten Ergebnis, wenn alle checkboxen aktiviert sind - wenn aber nicht, klafft eine riesen Lücke im Formular.
Wie stelle ich das an, dass die DIVs schön untereinander angezeigt werden? Vielen Dank!

 

[tobee]

Bau doch da mit den margin-top in deiner Funktion ein.
Wenn aktiviert margin-top an wenn nicht margin-top aus?

 

[hela]

Wenn ich die DIVs "aktiviere" legen Sie sich übereinander, ...

Da DIV-Elemente Block-Elemente sind, liegen sie normalerweise untereinander. Wenn sie nun bei dir übereinander dargestellt werden, wurden sie vermutlich irgendwo absolut positioniert. Das ist aber aus dem geposteten Quelltext nicht zu erkennen.

 

[Moritz123]

Hallo!

nein, sie wurden nicht absolut positioniert. Weiß der Geier, warum der Browser sie übereinander legt. Habe es jetzt so gelöst, dass jedes div in einer Tabellenzeile liegt.