Inhalt "einschieben"

[Andreas Korthaus]

Hallo!

Ich überlege gerade wie ich Inhalt ien eien Seite einschieben kann. Ich habe eine Struktur wie folgt(z.B. durch eine Tabelle):

+-------------------------------------------------+
|Überschift                 Details anzeigen(link)|
+-------------------------------------------------+
|Überschift2                                      |
+-------------------------------------------------+
|Text2                                            |
|mehr Text                                        |
|noch mehr Text                                   |
|...                                              |
+-------------------------------------------------+

Jetzt will ich das wenn man auf den link "Details anzeigen" oben rechts klickt, dass folgendes passiert(ohne neuen Request)

+-------------------------------------------------+
|Überschift                Details schließen(link)|
+-------------------------------------------------+
|Text1                                            |
|mehr Text                                        |
|noch mehr Text                                   |
|...                                              |
+-------------------------------------------------+
|Überschift2                                      |
+-------------------------------------------------+
|Text2                                            |
|mehr Text                                        |
|noch mehr Text                                   |
|...                                              |
+-------------------------------------------------+

Wie mache ich das am besten und vor allem am saubersten? Auf alle Fälle brauche ich ein Javascript.
Mir fallen 2 Varianten ein:
1. Ein <div> welches eingeblendet wird, nur wie sorge ich dafür dass dann der Rest der Seite nach unten rutscht?
2. Wäre eine dynamische Tabelle, d.h. ich füge Tabellenzeilen  ein, ist nur die Frage wie gut das dann alles funktioniert wenn ich ein paar mehr dieser "Aufklapp-Details" verwenden will. Ich bin auch nicht festgelegt auf Tabellen, nur auf die Struktur.

Was würdet Ihr hier machen?

Viele Grüße
Andreas

PS: Sorry das ich wieder keine Rücksicht auf Proportional-Schriften genommen habe, weiß es aber nicht besser darzustellen.

[Inge Siebel]

Also ich würde für jede Informations-Einheit (Überschrift, Text) eine Tabelle definieren, die ich mit dem display-Attribut ein- bzw. ausblende.

Beispiel:
<table cellpadding="0" cellspacing="0" border="0" width="100%" id="beitrag1" style="display:none">

Wenn jetzt auf den Link geklickt wird, setzt Du einfach:
document.getElementById('beitrag1').style.display = 'block';

Um das Layouttechnisch sauber gestalten zu können, kannst Du noch eine umgebende Tabelle nutzen.

Grüsse, Inge

[Andreas Korthaus]

Hallo!

Danke Dir! DAs sieht ja schonmal gut aus. Jetzt noch ein paar Fragen dazu:

• Funktioniert das ganze genau so zuverlässig mit Tabellen-Zeilen?
• Ich habe jetzt je einen Link zum ein und ausblenden. Wie kann ich immer nur den einen notwendigen Link einblenden, also wenn es aufgeklappt ist dynn nur "ausblenden" sonst "einblenden". Einfah genauso über eine id und display='none' bzw. 'block'?

So habe ich es mal gemacht:

<script type="text/javascript">
<!--
 function einblenden(id) {
     document.getElementById(id).style.display = 'block';
 }

function ausblenden(id) {
     document.getElementById(id).style.display = 'none';
 }
//-->
</script>

<table cellpadding="0" cellspacing="0" border="1" width="100%">
  <tr>
    <td>&Uuml;berschrift</td>
    <td align="right"><a onClick="einblenden('beitrag1')" href="#">ein</a> <a onClick="ausblenden('beitrag1')" href="#">aus</a></td>
  </tr>
</table>
<table cellpadding="0" cellspacing="0" border="1" width="100%" id="beitrag1" style="display:none">
  <tr>
    <td>
      <p>Text...</p>
      <p>bla</p>
    </td>
  </tr>
</table>

Viele Grüße
Andreas

[Inge Siebel]

Hallo Andreas,

leider klappt es meiner Erinnerung nach mit Tabellen-ZEILEN überhaupt nicht. Du musst schon ganze Tabellen nehmen. Deswegen auch mein Tipp mit der umgebenden Tabelle, um so das Layout entsprechend beibehalten zu können.

Grüsse, Inge