Auf- und Zuklappen

msycho

Erfahrenes Mitglied
Hallo!

Ich habe zwar einige Threads hier im Forum gefunden, jedoch funktioniert das bei mir nicht. Wobei ich glaube, dass es an meiner Umsetzung liegt.

Als letztes hatte ich mir an diesem Tutorial versucht:
http://www.tutorials.de/forum/javascript-tutorials/24983-basic-dhtml-menue.html

Meine Funktion im Kopf sieht so aus:

Code:
<script type="text/javascript">
<!--
function show(id) {
document.getElementById("forumstats").style.display="none";
document.getElementById(id).style.display="inline";
}
//-->
</script>

Mein Link:

Code:
<a href="#" onclick="show('stats')">Ein-/Ausblenden</a>

Der ein- bzw. auszublendende Text: (Anfang)

Code:
<table border="0" cellspacing="0" cellpadding="0" width="100%" id="stats" style="display:none;">

Ich kann klicken wie ich möchte, es tut sich nichts.
Kann mir wer sagen, was falsch ist, bitte?
 
Hi,

vergleiche mal den vergebenen ID-Namen im Script, mit denen im Funktionsaufruf und id-Attribut.
 
Boah, dass jedesmal Du mich auf diese Dinge hinweist. :)

Jetzt geht das aufklappen schonmal, danke!

Jetzt hab ich nur drei Sachen zu bemängeln.
Standardmäßig ist es ja ausgeblendet. Erst wenn man auf den Link klickt, ist die "Rubrik" eingeblendet. Kann ich das vertauschen? Wenn ja, wie?
Lasse ich das Ziel der URL leer, werde ich zwar nicht mehr zum Seitenkopf "geschubst", aber nach 1 Sekunde auf die Startseite. Wie kann ich bei der Ansicht bleiben bei dir ich bin? Also ohne dass ich woanders hingeleitet oder hingeschubst werde?
Ja das Dritte...hm, hab ich momentan wieder vergessen. :hm:

/EDIT: Das erste hab ich. Hab's einfach rumgedreht. :)
 
Zuletzt bearbeitet:
Hi,

häng mal ein return false an, damit du beim Funktionsaufruf nirgends hingeschubst / hingeleitet wirst:

Code:
<a href="#" onclick="show('stats');return false;">...</a>
 
Seltsam, ich werde beim Funktionsaufruf nicht zum Seitenbeginn geleitet (das Element befindet sich hierfür im unteren nicht-sichtbaren Bereich des Viewports).
 
Liegts an dem Ziel # ?

/EDIT: Ich habe jetzt mal Anker gesetzt. Jetzt passt es natürlich. Aber gibt es keine andere Lösung?

Mir ist wieder die zu Beginn dritte Frage eingefallen: Wie lasse ich ein Bild austauschen? Also z.B. ein plus zum Aufklappen und ein Minus zum Zuklappen.

Momentan sieht es so aus:

Code:
<script type="text/javascript">
<!--
function show(id) {
if (document.getElementById(id).style.display == "none") {  
        document.getElementById(id).style.display = "inline";  
        document.getElementById('bild'+id).src = "http://www.tutorials.de/forum/images/minus.gif"; 
    } 
    else {  
        document.getElementById(id).style.display = "none";
        document.getElementById('bild'+id).src = "http://www.tutorials.de/forum/images/plus.gif";   
    }  
}
//-->
</script>

Code:
<img id="bildstats" src="http://www.tutorials.de/forum/images/minus.gif" />

Es wird nur immer das Minus angezeigt.

/EDIT2: Die URL tutorials.de wird hier irgendwie automatisch hinzugefügt. Kommt also nicht von mir.
 
Zuletzt bearbeitet:
Hi,

probier mal folgendes für den Bildertausch:

Code:
function show(id) {

var bild = 'bild' + id;

if (document.getElementById(id).style.display == "none") {
        document.getElementById(id).style.display = "inline";
        document.getElementById(bild).src = "minus.gif";
    }
    else {
        document.getElementById(id).style.display = "none";
        document.getElementById(bild).src = "plus.gif";
    }
}
Ich hab in diesem Code das Verzeichnis images weggelassen, damit sich tutorials.de darin nicht breit macht. :)
 
Zurück