hidden div verdrängt andere Elemente

[ms_x]

Hallo,

ich hoffe, dass mir hier jemand weiterhelfen kann, denn mein Vorhaben bringt mich fast zum verzweifeln:

Ich möchte, dass auf einer HTML-Seite mehrere Überschriften zu lesen sind. Klickt man eine davon an, soll direkt darunter der entsprechende Text aufklappen und die anderen Überschriften nach unten schieben.

Erst habe ich versucht, dass mit voneinader unabhängigen divs zu lösen. Das div, in dem der Text war hat aber beim Einblenden (durch "Klick" auf die Grafik) die unteren Überschriften überschrieben. Jetzt habe ich es mit verschachtelten divs gemacht, die mit float: left; positioniert werden. Allerdings ist der Platz, an dem das ausgeblendete div ist, leer. Die Überschriften sind von Anfang an nach unten verschoben. Wenn man das div mit display: none auszeichnet, sieht´s gut aus. Aber ich habe keine Ahnung, ob oder wie sich das div dann noch einblenden lässt ...

Hier der Code, wüsste da vielleicht jemand eine Lösung?

<div style="width: 300px; line-height: 500%; float:left">
<h1 ><img src="plus.png" onclick="MM_showHideLayers('content','','show')" /> Lorem ipsum</h1>

<div id="content" style="width: 200px; visibility: hidden; float: left; ">
<p>
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<h1>Lorem ipsum</h1>
<h1>Lorem ipsum</h1>
<h1>Lorem ipsum</h1>
</div>

 

[Efchen]

Allerdings ist der Platz, an dem das ausgeblendete div ist, leer.

Ja, klar, es ist ja auch nur "hidden", hier unsichtbar. Der Platz wird dennoch reserviert.

Wenn man das div mit display: none auszeichnet, sieht´s gut aus. Aber ich habe keine Ahnung, ob oder wie sich das div dann noch einblenden lässt.

An der Stelle hast Du das ausprobieren dann sein lassen? display:none heißt ja nur, dass es nicht dargestellt wird (engl. display = anzeigen). Es existiert aber natürlich weiterhin. Also kann man es auch aus- und einblenden.

Hier der Code, wüsste da vielleicht jemand eine Lösung?

Du bist Deinen Weg nur nicht zu Ende gegangen, obwohl Du schon vor der Tür mit der Aufschrift "Lösung" gestanden hast.

Gruß,
-Efchen