Text einblenden

[Reni]

Hallo,

ich möchte, dass beim Klicken auf das Wort "weiterlesen" sich ein weiterer Text öffnet, welcher zuvor nicht zu sehen ist. Sofern der Leser sich entscheidet, die weitergehenden Informationen doch nicht lesen zu wollen, soll bei Klick auf das Wort "zurück" der zusätzliche Text wieder ausgeblendet werden.

Wie ich das Ganze per Radio Button realisiere, weiß ich bzw. habe ich mir schon für ein Formular zusammen gebastelt.
Leider kriege ich es mit dem Klick auf ein bestimmtes Wort überhaupt nicht hin.

Kann mir jemand auf die Sprünge helfen?

Bisher hatte ich es ohne Erfolg mit Verwendung eines Buttons folgendermaßen probiert:

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

Html:

<div style="text-align: right;"> <input
 name="weiterlesen" value="weiterlesen"
 onclick="function toggle_form_element()" type="button"><span
 style="font-family: Georgia;"></span><br>
            </div>

<table id="WL" border="0" cellpadding="0"
 cellspacing="0">
              <tbody>
                <tr>
                  <td style="vertical-align: top;"
 style.display="none;"><span style="font-family: Georgia;">bla bla</span>

Am liebsten wäre mir, wenn das Ganze ohne Verwendung eines Buttons und nur durch einen Klick auf die Wörter "weiterlesen" und "zurück" funktionieren würde.

[Christian S.]

Hi,

<div style="text-align: right;"> <input
name="weiterlesen" value="weiterlesen"
onclick="function toggle_form_element()" type="button"><span
style="font-family: Georgia;"></span><br>
            </div>

Bei function toggle_form_element() bitte das function weglassen. Du nutzt hier einen Aufruf, keine Funktionsdeklaration.

Am liebsten wäre mir, wenn das Ganze ohne Verwendung eines Buttons und nur durch einen Klick auf die Wörter "weiterlesen" und "zurück" funktionieren würde.

Hast du nicht versucht das Klick Event einfach an das Textelement zu hängen. Das geht doch dann!

Gruß!

[EKKi]

Mahlzeit,

<style type="text/css">  
[code lang=css]  
#einblenden {  
  text-decoration: underline;  
}  
  
#versteckt {  
  display: hidden;  
}  
  
#ausblenden {  
  text-decoration: underline;  
}  

</style>
<script type="text/javascript">

  
function einblenden(elem) {  
  elem.parentNode.getElementByid('versteckt').style.display = 'block';  
}  
  
function ausblenden(elem) {  
  elem.parentNode.getElementByid('versteckt').style.display = 'hidden';  
}  

</script>
<p>

ich möchte, dass beim Klicken auf das Wort "<span id="einblenden" onclick="einblenden(this);">weiterlesen</span>" sich ein weiterer Text öffnet, welcher zuvor nicht zu sehen ist. <div id="versteckt">Sofern der Leser sich entscheidet, die weitergehenden Informationen doch nicht lesen zu wollen, soll bei Klick auf das Wort "<span id="ausblenden" onclick="ausblenden(this);">zurück" der zusätzliche Text wieder ausgeblendet werden.</div>

</p>[/code]

MfG,
EKKi

[Reni]

Mahlzeit,

MfG,
EKKi

Ich habe es so wie von Dir beschrieben probiert - es passiert gar nichts. Der gesamte Text ist zu sehen und beim klicken auf die Wörter geschieht nix. Kannst Du vielleicht nochmal drüber schauen, woran es liegen könnte:

<script type="text/javascript">
function einblenden(elem) {
elem.parentNode.getElementByid('versteckt').style.display = 'block';
}
function ausblenden(elem) {
elem.parentNode.getElementByid('versteckt').style.display = 'hidden';
}
  </script>
  <style type="text/css">
#einblenden {
text-decoration: underline;
}
#versteckt {
display: hidden;
}
#ausblenden {
text-decoration: underline;
}
</style>

Html:

<div style="margin-left: 120px;"><span
 style="font-family: Georgia;">Text der immer sichtbar sein soll<br>
            <br>
            </span>
            <div style="text-align: right;"><span
 style="font-family: Georgia;" id="einblenden"
 onclick="einblenden(this);">weiterlesen</span><br>
            <span style="font-family: Georgia;"></span></div>
            <span style="font-family: Georgia;"> <br>
            </span>
            <div id="versteckt"><span
 style="font-family: Georgia;">Text der bei Klick auf "weiterlesen" eingeblendet und bei Klick auf "zurück" ausgeblendet werden soll.
            <br>
            </span>
            <div style="text-align: right;"><span
 style="font-family: Georgia;" id="ausblenden"
 onclick="ausblenden(this);">zur&uuml;ck </span><br
 style="font-family: Georgia;">
            </div>
            </div>

[EKKi]

Mahlzeit,

Ich habe es so wie von Dir beschrieben probiert - es passiert gar nichts. Der gesamte Text ist zu sehen und beim klicken auf die Wörter geschieht nix. Kannst Du vielleicht nochmal drüber schauen, woran es liegen könnte:

Es ist klar, dass es nicht funktionieren kann, bei der <div>-Suppe, die Du da köchelst. Vielleicht solltest Du Dir nochmal die http://de.selfhtml.org/javascript/intro.htm@title=DOM-Struktur insbesondere Deines Dokuments genauer anschauen (im Übrigen ist das hier ein sehr gutes Beispiel dafür, warum einige Leute ungern Quellcode posten - wenn dieser einfach nur kopiert wird, ohne dass der Fragende ihn wirklich versteht, anschließend aber noch beliebig daran herumändert, ist es kein Wunder, wenn irgendwann nichts mehr funktioniert ... und da der Fragende dann den Code nicht selbst entwickelt hat, fällt es ihm natürlich um so schwerer, gezielt nach dem Fehler zu suchen).

elem.parentNode.getElementByid('versteckt').style.display = 'block';

sucht in allen unterhalb des Elternelements des aktuellen Knotens gelegenen Knoten (also im Prinzip in der Menge aller "Geschwister" des aktuellen Knotens und des Knotens selbst) nach einem Knoten, der die ID "versteckt" besitzt und ändert dessen "display"-Eigenschaft.

Da Du aber noch diverse <div>s eingefügt hast (warum eigentlich?), stimmt natürlich die Knotenstruktur nicht mehr.

Nur ein Beispiel:

<div style="margin-left: 120px;"><span
style="font-family: Georgia;">Text der immer sichtbar sein soll<br>
            <br>
            </span>

Warum legst Du hier für diesen einen <span> als Schrift "Georgia" fest - und in allen folgenden <span>s ebenso? Warum legst Du diese Schriftart nicht zentral für alle <span>s fest? Und was sollen die unsäglichen <br>s? Zum Festlegen eines Abstands gibt es die CSS-Eigenschaften http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin@title=margin bzw. http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding@title=padding.

Räume Deine <div>-Suppe auf, validiere Dein Dokument und versuche, mein Codebeispiel an Deine Struktur anzupassen ... wenn das nicht funktioniert, darfst Du Dich gerne wieder melden (aber nur mit einer vernünftigen Fehlerbeschreibung) :-)

MfG,
EKKi

[plan_B]

Hallo,

Ich habe es so wie von Dir beschrieben probiert - es passiert gar nichts. Der gesamte Text ist zu sehen und beim klicken auf die Wörter geschieht nix.

function ausblenden(elem) {
elem.parentNode.getElementByid('versteckt').style.display = 'hidden';
}

kleines Versehen: 'none' statt 'hidden'

<http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display >

Gruß plan_B