# Auf- und Zuklappen



## msycho (26. März 2007)

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:


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

Mein Link:


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

Der ein- bzw. auszublendende Text: (Anfang)


```
<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?


----------



## Maik (26. März 2007)

Hi,

vergleiche mal den vergebenen ID-Namen im Script, mit denen im Funktionsaufruf und id-Attribut.


----------



## msycho (26. März 2007)

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.


----------



## Maik (27. März 2007)

Hi,

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


```
<a href="#" onclick="show('stats');return false;">...</a>
```


----------



## msycho (27. März 2007)

Hab ich gemacht. Ändert aber nichts.


----------



## Maik (27. März 2007)

Seltsam, ich werde beim Funktionsaufruf nicht zum Seitenbeginn geleitet (das Element befindet sich hierfür im unteren nicht-sichtbaren Bereich des Viewports).


----------



## msycho (27. März 2007)

```
<a href="#" onclick="show('stats');return false;">klick</a>
```

Ist doch richtig, oder?


----------



## Maik (27. März 2007)

Das sieht soweit richtig aus.


----------



## msycho (27. März 2007)

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:


```
<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>
```


```
<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.


----------



## Maik (27. März 2007)

Hi,

probier mal folgendes für den Bildertausch:


```
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.


----------



## msycho (27. März 2007)

Ändert auch nichts.

Im Firefox kommt auch in der Fehlerkonsole folgendes:
document.getElementById(bild) has no properties


----------



## Niederbobi (27. März 2007)

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


 <a href="javascript: do(...)">..</a>      var do = function( ... ) { ... ; return undefined; }  ... sry - ich kann keine Zeilenumbruch machen ..   // Dirk


----------



## Maik (27. März 2007)

msycho hat gesagt.:


> Ändert auch nichts.
> 
> Im Firefox kommt auch in der Fehlerkonsole folgendes:
> document.getElementById(bild) has no properties


Tut mir leid, aber das Script läuft in allen mir zur Verfügung stehenden Browsern einwandfrei, und keiner wirft da eine Fehlermeldung aus.

Das ist der vollständige Quellcode meines Testdokuments:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<script type="text/javascript">
<!--
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";
    }
}
//-->
</script>

</head>
<body>

<a href="#" onclick="show('stats');return false;"><img src="minus.gif" id="bildstats">Ein-/Ausblenden</a>

<table border="1" cellspacing="0" cellpadding="0" width="100%" id="stats" style="display:none;">
       <tr>
           <td>test</td>
       </tr>
</table>

</body>
</html>
```


----------



## msycho (28. März 2007)

Hier mal mein Code:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<script type="text/javascript">
<!--
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";
    }
}
//-->
</script>

</head>
<body>

<table cellpadding="4" cellspacing="1" border="0" width="100%">
 <tr>
  <td style="border-top:1px solid #5A5D5A;border-bottom:1px solid #5A5D5A;background:#ccccc;">
   <font class="small"><b><a name="forumstats">Stats</a></b> <a href="#forumstats" onclick="show('forumstats');return false;"><img id="bildstats" src="minus.gif" alt="Zu-Auf" title="Zu-Auf" /></a></font>
  </td>
 </tr>
 <tr>
  <td>
	<table border="0" cellpadding="0" cellspacing="0" width="100%" id="forumstats" style="display:none;">
	 <tr>
	  <td>
		DaDiDeDum
	  </td>
	 </tr>
	</table>
  </td>
 </tr>
</table>

</body>
</html>
```

Im FF wird das Bild nicht gewechselt. Im IE passiert nichts, also nichts mit Auf- und Zuklappen.


----------



## Maik (28. März 2007)

Zum einen hast du im img-Element einen falschen ID-Namen gesetzt, er muss *bildforumstats* lauten.

Der zweite Grund ist scheinbar der gleichlautende Ankername *forumstats* - nenne ihn also einfach mal um.


----------



## msycho (28. März 2007)

Ja, es funktioniert. Danke!

Die ID vom Bild muss also gleich sein wie die vom zu öffnenden bzw. schließenden Teil.
Ebenso darf der Anker nicht die gleiche ID tragen.


----------



## msycho (15. Juli 2007)

Ich grabe das ganze mal aus. 

Wie kann ich es umsetzen, dass wenn ein User jetzt einen Bereich aus- bzw. einblendet, dieser auch bei einem erneuten Besuch aus- bzw. eingeblendet wird?


----------



## Maik (15. Juli 2007)

Hi,

beschäftige dich mal mit der cookie-Eigenschaft.

Ein Beispiel findest du z.B. hier -> http://christoph.ist-stylish.de/tut/newsmemory.html


----------



## PitPossum (7. August 2007)

Hallo Leute, ich habe hier folgenden Code für ein Menü aus 4 einzelnen Teilen, der auch prima funktioniert.

Was ich allerdings nicht hinkriege ist, dass beim Klick auf ein Menü eine Grafik (z.B. "+" oder "-") abhängig vom Zustand des Menüs angezeigt wird.
Klappt man sozusagen ein Menü auf, steht statt "+" ein "-". Klappt man es zu, wir der "-" zum "+".

Könnte mir bitte jemand helfen und sagen was ich an diesem Code noch ergänzen soll?


```
<html>
<head>
<title>Auswahlmenü</title>
<base target="anzeige">
<script type="text/javascript">
<!--

function show(divid) {
d=document;

if (d.getElementById(divid).style.display == 'block')
   {
      d.getElementById(divid).style.display='none';

   }
   else
   {
    d.getElementById('cat1').style.display='none';
    d.getElementById('cat2').style.display='none';
    d.getElementById('cat3').style.display='none';
    d.getElementById('cat4').style.display='none';

    d.getElementById(divid).style.display='block';
   }
}
//-->
</script>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" link="#800000" alink="#000000" bgcolor="#FFFFFF" vlink="#800000">
<a onclick="show('cat1')">+ <b>Bands:</b></a><br>
<div id="cat1" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Band "EarlGrey"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">Band "Braumoasda"</a><br>
</div>
<a onclick="show('cat2')">+ <b>DJs:</b></a><br>
<div id="cat2" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">DJ Scream</a><br>
</div>
<a onclick="show('cat3')">+ <b>Communities:</b></a><br>
<div id="cat3" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Nightfeaverteam</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">PsyLaz</a><br>
</div>
<a onclick="show('cat4')">+ <b>Andere:</b></a><br>
<div id="cat4" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Musikfestival "JULA"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">Rus. Club "Bravo"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">DAB-Service</a><br>
</div>

</body>
</html>
```


----------



## Quaese (7. August 2007)

Hi,

übergib der Funktion *show* neben der ID für die Kategorie noch das auslösende Objekt mit *this*.
Der Inhalt der *innerHTML*-Eigenschaft dieses Objektes wird dann in ein *+* geändert.
Weiterhin wird eine Variable zum "Merken" des vorhergehenden auslösenden Objektes erstellt. Damit
wird es möglich, Änderungen wieder zurück zu nehmen.

```
<html>
<head>
<title>Auswahlmenü</title>
<base target="anzeige">
<script type="text/javascript">
<!--
var objSave = null;

function show(objLink, divid) {
  d=document;

  if(objSave != null)
    objSave.innerHTML = "+";

  if (d.getElementById(divid).style.display == 'block'){
    d.getElementById(divid).style.display='none';
  }else{
    d.getElementById('cat1').style.display='none';
    d.getElementById('cat2').style.display='none';
    d.getElementById('cat3').style.display='none';
    d.getElementById('cat4').style.display='none';

    d.getElementById(divid).style.display='block';
    objLink.innerHTML = "-";
    objSave = objLink;
  }
}
//-->
</script>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" link="#800000" alink="#000000" bgcolor="#FFFFFF" vlink="#800000">
<a onclick="show(this, 'cat1')">+ <b>Bands:</b></a><br>
<div id="cat1" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Band "EarlGrey"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">Band "Braumoasda"</a><br>
</div>
<a onclick="show(this, 'cat2')">+ <b>DJs:</b></a><br>
<div id="cat2" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">DJ Scream</a><br>
</div>
<a onclick="show(this, 'cat3')">+ <b>Communities:</b></a><br>
<div id="cat3" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Nightfeaverteam</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">PsyLaz</a><br>
</div>
<a onclick="show(this, 'cat4')">+ <b>Andere:</b></a><br>
<div id="cat4" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Musikfestival "JULA"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">Rus. Club "Bravo"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">DAB-Service</a><br>
</div>

</body>
</html>
```
Ciao
Quaese


----------



## Maik (7. August 2007)

Hi,


PitPossum hat gesagt.:


> Was ich allerdings nicht hinkriege ist, dass beim Klick auf ein Menü eine Grafik (z.B. "+" oder "-") abhängig vom Zustand des Menüs angezeigt wird.
> Klappt man sozusagen ein Menü auf, steht statt "+" ein "-". Klappt man es zu, wir der "-" zum "+".



das wären die notwendigen Ergänzungen für eine "grafische" Umsetzung:


```
<html>
<head>
<title>Auswahlmenü</title>
<base target="anzeige">
<script type="text/javascript">
<!--
function show(divid) {
d=document;

var bild = 'bild' + divid;

if (d.getElementById(divid).style.display == 'block')
   {
      d.getElementById(divid).style.display='none';
      d.getElementById(bild).src = "plus.gif";
   }
   else
   {
    d.getElementById('cat1').style.display='none';
    d.getElementById('cat2').style.display='none';
    d.getElementById('cat3').style.display='none';
    d.getElementById('cat4').style.display='none';

    d.getElementById(divid).style.display='block';
    d.getElementById(bild).src = "minus.gif";
   }
}
//-->
</script>
</head>
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" link="#800000" alink="#000000" bgcolor="#FFFFFF" vlink="#800000">
<a onclick="show('cat1')"><img src="plus.gif" id="bildcat1"><b>Bands:</b></a><br>
<div id="cat1" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Band "EarlGrey"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">Band "Braumoasda"</a><br>
</div>
<a onclick="show('cat2')"><img src="plus.gif" id="bildcat2"><b>DJs:</b></a><br>
<div id="cat2" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">DJ Scream</a><br>
</div>
<a onclick="show('cat3')"><img src="plus.gif" id="bildcat3"><b>Communities:</b></a><br>
<div id="cat3" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Nightfeaverteam</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">PsyLaz</a><br>
</div>
<a onclick="show('cat4')"><img src="plus.gif" id="bildcat4"><b>Andere:</b></a><br>
<div id="cat4" style="display:none">
&nbsp;&nbsp;&nbsp;• <a href="#">Musikfestival "JULA"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">Rus. Club "Bravo"</a><br>
&nbsp;&nbsp;&nbsp;• <a href="#">DAB-Service</a><br>
</div>

</body>
</html>
```


----------



## PitPossum (7. August 2007)

Maik hat gesagt.:


> Hi,
> 
> 
> das wären die notwendigen Ergänzungen für eine "grafische" Umsetzung:
> ...



Vielen Dank für die schnelle Hilfestellung. Das hat prima funktioniert!
Diese Lösung bringt allerdings eine weitere Frage mit sich.  

Wie kann ich es gewährleisten, das ausschliesslich das aufgeklappte Menü ein "-" hat.
Versuch bitte 2 oder 3 menüs nacheinander aufzuklappen ohne sie wieder zu schliessen um diesen Nebeneffekt zu sehen.


----------



## Quaese (7. August 2007)

Hi,

Du könntest beide Scripts kombinieren. Maiks graphische Lösung und mein "Speichern" des alten Objektes.

```
var objSave = null;

function show(divid) {
  d=document;

  var bild = 'bild' + divid;

  if(objSave != null)
    objSave.src = "../bilder/plus.gif";

  if(d.getElementById(divid).style.display == 'block'){
    d.getElementById(divid).style.display='none';
  }else{
    d.getElementById('cat1').style.display='none';
    d.getElementById('cat2').style.display='none';
    d.getElementById('cat3').style.display='none';
    d.getElementById('cat4').style.display='none';

    d.getElementById(divid).style.display='block';
    d.getElementById(bild).src = "../bilder/minus.gif";
    objSave = d.getElementById(bild);
  }
}
```
Ciao
Quaese


----------



## PitPossum (7. August 2007)

*Quaese*, vielen Dank.
Das hat sofort geklappt!

Jetzt ist es genau wie es sein sollte. Nochmals Vielen Dank!

Wenn es euch nichts ausmacht hätte noch eine Frage, und zwar:
wie mache ich es, dass der Zustand des Menüs nach dem aufklappen gespeichert wird, und ein menü nur dann wieder geschlossen wird, wenn man erneut drauf klickt.

Im Endeffekt will ich, dass man nach Wunsch mehrere untermenüs gleichzeitig ansehen kann.


----------



## Maik (8. August 2007)

```
function show(divid){
 d=document;

 var bild = 'bild' + divid;

 if(d.getElementById(divid).style.display == 'block'){
  d.getElementById(divid).style.display = 'none';
  d.getElementById(bild).src = 'plus.gif';
 }else{
  d.getElementById(divid).style.display = 'block';
  d.getElementById(bild).src = 'minus.gif';
 }

}
```


----------



## PitPossum (8. August 2007)

Maik hat gesagt.:


> ```
> function show(divid){
> d=document;
> 
> ...



Nochmals Danke euch beiden, jetzt funktioniert es perfekt.
Bei Interesse könnt Ihr das Endergebnis auf meiner homepage auf der linken Seite unter der Rubrik "Unsere Freunde" nachsehen.


----------



## PitPossum (11. August 2007)

Jetzt muss ich natürlich übertreiben.
Wenn ihr dazu keine Zeit/Lust habt, kann ich das verstehen.

*Meine Frage wäre wie folgt:*
Wie kann mann nun diesen Script so erweitern, dass er:
- Die Anzahl der Elemente in einer Kategorie als Zahl (x) ausgibt.

Dem, der sich damit beschäftigen möchte danke ich im Voraus


----------



## Chaosengel_Gabriel (14. September 2007)

Also... Weiter helfen kann ich dir da leider nicht...
Hab dazu selber ne Frage ^^
Kann man das nich auch nen bissl verallgemeinern, sodass der Effekt sich da auswirkt, wo ich ihn halt aufrufe!?
Und muss ich das unbedingt mit nem Link machen oder kann ich z.B. nen <button> nehmen, der nen Menü auf und zuklappt?

Das "speichern" des Zustandes vom Menü müsste man auch in der Session speichern können... Zumindestens bei mir, weil ich das eine Menü nur eingeloggten Usern zeige, die dadurch auch ne Session haben ^^


----------

