# toggle news script problem :-)



## signo (11. Juni 2004)

Hi nun ist es endlich soweit das ich gar nicht mehr weiter weiss  ich habe sämtlich tutorials abgeklappert und geschaut aber nirgends eine problemlösung gefunden.

hier erstmal der quelltext


```
<html>
<head>
<script type="text/javascript">

var last = '';
var stat = 0;

function toggle(id){
    //1:
    if(stat==0){
      document.getElementById(id).style.display = 'block';
      document.hid1.src = "minus.gif";
      stat = 1;
      last = id;
    }else if((stat==1)&&(last==id)){
      document.getElementById(last).style.display = 'none';
      document.hid1.src = "plus.gif";
      stat = 0;
      last = id;
    }else{
      document.getElementById(last).style.display = 'none';
      document.getElementById(id).style.display = 'block';
      document.hid1.src = "plus.gif";
      stat = 1;
      last = id;
    }
    
   
}

</script>

</head>

<body>
<tr style="display: "><td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td width="18px" align="left">
<a href="javascript:toggle('test1')">
<img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/></a>
</td>
<td align="left">
<span class="smalltext"><b>Ich bin so geil 11</b></span>
</td></tr></table></td></tr>



<tr><td><div style="display:none;" id="test1">
  dieser text erscheint erst beim klicken<br>
  dieser text erscheint erst beim klicken<br>
  dieser text erscheint erst beim klicken<br>
  dieser text erscheint erst beim klicken<br>
  dieser text erscheint erst beim klicken<br>
  dieser text erscheint erst beim klicken<br>
  dieser text erscheint erst beim klicken<br>
  dieser text erscheint erst beim klicken<br>
</div></td></tr>



</body>
</html>
```

so das ganze funktioniert auch wunderbar einwandfrei ! problem an der sache ist aber ich kann das nur einmal anzeigen auf der seite.
sobald ich das toggle script zweimal aufrufen will (ich verändere auch die ids ^^) funktioniert die bildanzeige nicht mehr, d.h. es wird nur noch ein plus angezeigt.

ich vermute das hängt mit dem document.hid1.src = "plus.gif"; und dem namen des images zusammen ! da hab ich auch schon alles probiert (unterschiedliche ids,namen ect.) nichts ging 

nun hoffe ich, dass jemand weiss wie das fuer mehrere toggle anzeigen  ,so dass immer da wo ich draufklicke auch + bzw. minus kommt 

danke schonmal


----------



## Quaese (11. Juni 2004)

Hi,

Du "merkst" Dir in *stat* und *last* immer nur eine ID bzw. einen Zustand.
Willst Du jedoch mehr Bereiche mit Toggle-Eigenschaften ausstatten, so musst
Du auch entsprechend viele Möglichkeiten zum Speichern schaffen. Am einfachsten
erreichst Du das über Arrays.

Das folgende Script demonstriert Dir das Prinzip für drei Toggle-Bereiche, wobei
die Zählung bei Null beginnt.

```
var arrLast = new Array('', '', '');  // Array für IDs
var arrStat = new Array(0, 0, 0);  // Array für Zustände

function toggle(id, intBereich){
    //1:
    if(arrStat[intBereich]==0){
        document.getElementById(id).style.display = 'block';
        document.hid1.src = "minus.gif";
        arrStat[intBereich] = 1;
        arrLast[intBereich] = id;
    }else if((arrStat[intBereich]==1)&&(arrLast[intBereich]==id)){
        document.getElementById(arrLast[intBereich]).style.display = 'none';
        document.hid1.src = "plus.gif";
        arrStat[intBereich] = 0;
        arrLast[intBereich] = id;
    }else{
        document.getElementById(arrLast[intBereich]).style.display = 'none';
        document.getElementById(id).style.display = 'block';
        document.hid1.src = "plus.gif";
        arrStat[intBereich] = 1;
        arrLast[intBereich] = id;
    }
}
```
Der entsprechende HTML-Abschnitt könnte beispielsweise wie folgt aussehen:

```
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="width: 18px;" align="left">
            <a href="javascript:toggle('test1', 0)">
            <img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/>
            </a>
        </td>
        <td width="100%" align="left">
            <span class="smalltext"><b>Ich bin so geil 11</b></span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="display:none;" id="test1">
            Text im Bereich 0<br>
            </div>
        </td>
    </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="width: 18px;" align="left">
            <a href="javascript:toggle('test2', 1)">
            <img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/>
            </a>
        </td>
        <td width="100%" align="left">
            <span class="smalltext"><b>Ich bin so geil 11</b></span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="display:none;" id="test2">
            Text im Bereich 1<br>
            </div>
        </td>
    </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="width: 18px;" align="left">
            <a href="javascript:toggle('test3', 2)">
            <img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/>
            </a>
        </td>
        <td width="100%" align="left">
            <span class="smalltext"><b>Ich bin so geil 11</b></span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="display:none;" id="test3">
            Text im Bereich 2<br>
            </div>
        </td>
    </tr>
</table>
```
Ciao
Quaese


----------



## signo (11. Juni 2004)

jau das mit den texten funktioniert einwandfrei 

ich hab deinen quelltext mal testweise übernommen


```
<html>
<head>
<script type="text/javascript">

var arrLast = new Array('', '', '');  // Array für IDs
var arrStat = new Array(0, 0, 0);  // Array für Zustände

function toggle(id, intBereich){
    //1:
    if(arrStat[intBereich]==0){
        document.getElementById(id).style.display = 'block';
        document.hid1.src = "minus.gif";
        arrStat[intBereich] = 1;
        arrLast[intBereich] = id;
    }else if((arrStat[intBereich]==1)&&(arrLast[intBereich]==id)){
        document.getElementById(arrLast[intBereich]).style.display = 'none';
        document.hid1.src = "plus.gif";
        arrStat[intBereich] = 0;
        arrLast[intBereich] = id;
    }else{
        document.getElementById(arrLast[intBereich]).style.display = 'none';
        document.getElementById(id).style.display = 'block';
        document.hid1.src = "minus.gif";
        arrStat[intBereich] = 1;
        arrLast[intBereich] = id;
    }
}
</script>

</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="width: 18px;" align="left">
            <a href="javascript:toggle('test1', 0)">
            <img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/>
            </a>
        </td>
        <td width="100%" align="left">
            <span class="smalltext"><b>Ich bin so geil 11</b></span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="display:none;" id="test1">
            Text im Bereich 0<br>
            </div>
        </td>
    </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="width: 18px;" align="left">
            <a href="javascript:toggle('test2', 1)">
            <img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/>
            </a>
        </td>
        <td width="100%" align="left">
            <span class="smalltext"><b>Ich bin so geil 11</b></span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="display:none;" id="test2">
            Text im Bereich 1<br>
            </div>
        </td>
    </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td style="width: 18px;" align="left">
            <a href="javascript:toggle('test3', 2)">
            <img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/>
            </a>
        </td>
        <td width="100%" align="left">
            <span class="smalltext"><b>Ich bin so geil 11</b></span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="display:none;" id="test3">
            Text im Bereich 2<br>
            </div>
        </td>
    </tr>
</table>


</body>
</html>
```

wenn ich ihn so verwende ändert sich beim klicken nicht das gif bild (es kommt kein minus bild) soweit war ich ja vorher schon  auch ohne arrays ^^


----------



## Quaese (11. Juni 2004)

Hi,

stimmt, kann ja so gar nicht funktionieren. Die IDs der Bilder muss ja auch noch 
einbezogen werden. Ich habe das Ganze mal in den Anhang gepackt. Schau's Dir 
einfach mal an.

Ciao
Quaese


----------



## signo (11. Juni 2004)

hmm so langsam krieg ich die krise  aber danke fuer deine hilfe  

mit dem quelltext in deinem anhang kann ich die toggles nur aufklappen abewr nicht wieder zu  und nen minus kommt auch nicht 

siehe http://www.erfurder.de/newstoggle.php

wieso geht das nu schon wieder nich ?


----------



## Quaese (11. Juni 2004)

Hi,

wenn ich mir Deine Seite mit dem IE6 ansehe, funktioniert es so, wie Du es haben 
wolltest. Es klappt auf und zu - das Plus wechselt zum Minus und umgekehrt.

Ciao
Quaese


----------



## signo (12. Juni 2004)

korrekt nur soweit war ich vorher schon  also das es im ie  ! aber es  bei mozilla zum beispiel nicht ! ich bekomme es auch mit mozilla zum laufen allerdings nur mit einem toggle pro seite :-(


----------



## Quaese (12. Juni 2004)

Morgen,

Fehler gefunden!

In den IMG-Tags stehen name-Attribute (z.B. name="hid1"). Es müssen jedoch IDs
sein (z.B. id="hid1"). 

Wenn Du das geändert hast, sollte es funktionieren. Ich habe es im IE6, Opera 7.22,
Netscape 7.1 und Mozilla 1.6 erfolgreich getestet.

Ciao
Quaese


----------



## signo (12. Juni 2004)

wunderbar super 

nur ein problem habe ich noch  du sagtest das wäre fuer 3 toggles. wenn ich jetzt aber ne newsseite habe wo das optional ist:

also 10 news werden maximal angezeigt wovon alle das toggle enthalten können oder keins oder mehrere !

wie bekomm ich dann das javascript dynamisch hin ?  weil können ja mal 3 mal 4 sein und dann wäre doch das array zu klein oder  ?


----------



## Quaese (12. Juni 2004)

Hi,

Du kannst die Arrays ja dynamisch anlegen lassen. Dazu musst Du nur wissen, wieviele
Toggles die entsprechende Seite enthält.

Um das zu realisieren, ersetzt Du folgenden Script-Abschnitt

```
var arrLast = new Array('', '', '');  // Array für IDs
var arrStat = new Array(0, 0, 0);  // Array für Zustände
```
hiermit

```
var intAnzahlToggles = 3;   // Anzahl der Toggles in einer Seite
var arrLast = new Array();  // Array für IDs
var arrStat = new Array();  // Array für Zustände

// Arrays initialisieren
for(i=0; i<intAnzahlToggles; i++){
    arrLast[i] = '';  // Keine ID
    arrStat[i] = 0;   // Kein Zustand
}
```
Durch Ändern der Variablen *intAnzahlToggles* kannst Du die Anzahl der 
enthaltenen Toggles bestimmen.

Ciao
Quaese


----------



## signo (12. Juni 2004)

hmm jo ich kann ja die anzahl in php in ne variable schreiben das geht aber kann ich die auch in das javascript übergeben ? 

also meinetwegen im php $i="5";


und dann im javascript

var intAnzahlToggles = $i;

ich nehme an das wird nicht funktionieren oder ?


----------



## KristophS (12. Juni 2004)

Ne du musst es wenn so machen:

```
var intAnzahlToggles = <?php echo($i); ?>
```


----------



## signo (12. Juni 2004)

ahh gute idee  hmm ich werd das mal testen alles und dann sag ich bescheid obs klappt  danke nochmal fuer die super hilfe

hehe ich muss es zwar nen bissl ummodeln  und schwierig einbinden aber letztendlich hats geklappt ! super duper hilfe war das ! vielen dank


----------



## ByeBye 8492 (13. Juni 2004)

Moinsen,

wenn du noch Hilfe beim einbinden brauchst musst sagen, habe heute nämlich auch son Ding gesucht und am Ende sogar gefunden , auch mit variabler Anzeige .

Allerdings habe ich mit meinem ein Problem:

Immer wenn ich auf einen Link klicke, gehen die "Kästchen" zu ... kann man das mit Javascript irgendwie zwischenspeichern?


----------



## signo (13. Juni 2004)

nein ich habs komplett mit meiner db hinbekommen ^^ aber trotzdem danke  

dein problem allerdings versteh ich gar nich ? kannst das mal genauer erklären ?   
nur beim link mit dem bild oder wo ?


----------



## ByeBye 8492 (13. Juni 2004)

> _Original geschrieben von signo _
> *nein ich habs komplett mit meiner db hinbekommen ^^ aber trotzdem danke
> 
> dein problem allerdings versteh ich gar nich ? kannst das mal genauer erklären ?
> nur beim link mit dem bild oder wo ?  *



Also musste dir so vorstellen:

----LAYER----
LINK
----LAYER----

Wenn ich nun auf den Link raufklicke, dann geht der Layer wieder zu ... obwohl er eigentlich offen sein sollte, desweiteren habe ich noch das Problem, das sobald ich auf F5 drücke alle Felder wieder auf dem Ausgangszustand waren, ich würde es aber gerne haben, das es irgendwie gespeichert wird, wie der Zustand des Feldes war.

Zu den unendlichen Anzahlen von Layern: das ist mir gestern Abend kaputt gegangen und ich kriege es nicht mehr hin :heul:


----------



## signo (13. Juni 2004)

ohje das weiss ich auch nicht ^^ muesste man mal Quaese fragen


----------



## vIsIOnlgz (2. April 2005)

Hallo,

ich weiss das der Thread schon etwas älter ist, aber ich finde sonst keinen Hilfethread und bekommen es einfach nicht zum laufen. 

Hier nun mein Code:


```
<html>
<head>
<script type="text/javascript">
var last = '';
var stat = 0;
function toggle(id){
//1:
if(stat==0){
document.getElementById(id).style.display = 'block';
document.hid1.src = "minus.gif";
stat = 1;
last = id;
}else if((stat==1)&&(last==id)){
document.getElementById(last).style.display = 'none';
document.hid1.src = "plus.gif";
stat = 0;
last = id;
}else{
document.getElementById(last).style.display = 'none';
document.getElementById(id).style.display = 'block';
document.hid1.src = "plus.gif";
stat = 1;
last = id;
}
}
</script>
</head>

<body>

<tr style="display: "><td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td width="18px" align="left">
<a href="javascript:toggle('test1')">
<img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/></a>
</td>
<td align="left">
<span class="smalltext"><b>Ich bin so geil 11</b></span>
</td></tr></table></td></tr>

<tr><td><div style="display:none;" id="test1">
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
</div></td></tr>

<br><br><br>

<tr style="display: "><td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td width="18px" align="left">
<a href="javascript:toggle('test2')">
<img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="plus.gif" border="0" name="hid1" style="position: relative; left: -2px;"/></a>
</td>
<td align="left">
<span class="smalltext"><b>Ich bin so geil 12</b></span>
</td></tr></table></td></tr>

<tr><td><div style="display:none;" id="test2">
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
</div></td></tr>

</body>
</html>
```

Mein Problem:

Habe ich nur einen drin, dann klappt es wunderbar auf und plus ändert sich auf minus. Wenn ich allerdings 2, wie oben in meinem Code, einbinde, dann geht zwar immer noch alles wunderbar auf, aber das gif ändert sich nicht mehr, bleibt immer auf plus. Ich habe es, wie oben beschrieben, versucht von name="hid1" auf id="hid1" in der img Anweisung zu ändern, dann klappt aber garnichts mehr. 

Könnte mir jemande helfen, was habe ich falsch gemacht ?

Vielen Dank

mfg vIsIOn


----------



## Quaese (2. April 2005)

Hi,

änder die name-Attribute der Images in IDs (hid1 und hid2). Anschliessend fügst du noch einen
Array mit den IDs der Bilder zum Script. Über diesen Array rufst du das jeweils benötigte Bildobjekt
auf.

Weiterhin musst du Funktionsaufruf wieder erweitern um den Bereich, der getoggelt werden soll
(die Zählung beginnt bei Null).

```
<html>
<head>
<script type="text/javascript">
var arrLast = new Array('', '');          // Array für IDs der ausklappbaren Bereiche
var arrIDs  = new Array('hid1', 'hid2');  // Array für Bild-IDs
var arrStat = new Array(0, 0);            // Array für Zustände (0: eingeklappt; 1: ausgeklappt)

function toggle(id, intBereich){
    // Fall der angeklickte Bereich eingeklappt ist
    if(arrStat[intBereich]==0){
    	// Bereich ausklappen und Einklapp-GIF einblenden
      document.getElementById(id).style.display = 'block';
      document.getElementById(arrIDs[intBereich]).src = "../bilder/up.gif";
      // Bereich als ausgeklappt markieren
      arrStat[intBereich] = 1;
      // ID des ausgeklappten Bereichs merken
      arrLast[intBereich] = id;
    // Falls der angeklickte Bereich ausgeklappt ist und wieder geschlossen werden soll
    }else if((arrStat[intBereich]==1)&&(arrLast[intBereich]==id)){
      document.getElementById(arrLast[intBereich]).style.display = 'none';
      document.getElementById(arrIDs[intBereich]).src = "../bilder/down.gif";
      arrStat[intBereich] = 0;
      arrLast[intBereich] = id;
    }else{
      document.getElementById(arrLast[intBereich]).style.display = 'none';
      document.getElementById(id).style.display = 'block';
      document.getElementById(arrIDs[intBereich]).src = "../bilder/down.gif";
      arrStat[intBereich] = 1;
      arrLast[intBereich] = id;
    }
}
</script>
</head>

<body>

<tr style="display: "><td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td width="18px" align="left">
<a href="javascript:toggle('test1', 0)">
<img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="../bilder/down.gif" border="0" id="hid1" style="position: relative; left: -2px;"/></a>
</td>
<td align="left">
<span class="smalltext"><b>Ich bin so geil 11</b></span>
</td></tr></table></td></tr>

<tr><td><div style="display:none;" id="test1">
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
</div></td></tr>

<br><br><br>

<tr style="display: "><td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td width="18px" align="left">
<a href="javascript:toggle('test2', 1)">
<img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="../bilder/down.gif" border="0" id="hid2" style="position: relative; left: -2px;"/></a>
</td>
<td align="left">
<span class="smalltext"><b>Ich bin so geil 12</b></span>
</td></tr></table></td></tr>

<tr><td><div style="display:none;" id="test2">
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
</div></td></tr>

</body>
</html>
```
Ich hoffe, das hilft dir weiter.

Ciao
Quaese


----------



## vIsIOnlgz (3. April 2005)

Vielen Dank, 

werde es nacher direkt mal testen und mich wieder melden! 



mfg vIsIOn


----------



## sabotaz (12. Januar 2007)

hey leute, bin neu hier und ich weiß, dass topic ist sehr alt aber ich steh kurz vorm durchdrehen und naja....

also ich habe wie im post über mir den code so übernommen und noch 2 ids hinzugefügt, und jetzt ist das problem, dass ich auf das "down" bild klicke, sich das bild auf "up" ändert aber der inhalt wird nicht ausgeklappt oder eingeklappt, er ist von anfang an ausgeklappt....

danke schon mal


----------



## Maik (12. Januar 2007)

Hi,

ohne jetzt den Quellcode von dir gesehen zu haben, wären dies die erforderlichen Erweiterungen für das obige Beispiel:


Script-Code:


```
var arrLast = new Array('', '', '', '');          // Array für IDs der ausklappbaren Bereiche
var arrIDs  = new Array('hid1', 'hid2', 'hid3', 'hid4');  // Array für Bild-IDs
var arrStat = new Array(0, 0, 0, 0);            // Array für Zustände (0: eingeklappt; 1: ausgeklappt)
```

HTML-Code:


```
<tr style="display: "><td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td width="18px" align="left">
<a href="javascript:toggle('test1', 0)">
<img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="../bilder/down.gif" border="0" id="hid1" style="position: relative; left: -2px;"/></a>
</td>
<td align="left">
<span class="smalltext"><b>Ich bin so geil 11</b></span>
</td></tr></table></td></tr>

<tr><td><div style="display:none;" id="test1">
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
</div></td></tr>

<br><br><br>

<tr style="display: "><td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td width="18px" align="left">
<a href="javascript:toggle('test2', 1)">
<img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="../bilder/down.gif" border="0" id="hid2" style="position: relative; left: -2px;"/></a>
</td>
<td align="left">
<span class="smalltext"><b>Ich bin so geil 12</b></span>
</td></tr></table></td></tr>

<tr><td><div style="display:none;" id="test2">
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
</div></td></tr>

<!-- Hier folgen die zwei neuen Layer -->

<br><br><br>

<tr style="display: "><td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td width="18px" align="left">
<a href="javascript:toggle('test3', 2)">
<img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="../bilder/down.gif" border="0" id="hid3" style="position: relative; left: -2px;"/></a>
</td>
<td align="left">
<span class="smalltext"><b>Ich bin so geil 13</b></span>
</td></tr></table></td></tr>

<tr><td><div style="display:none;" id="test3">
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
</div></td></tr>

<br><br><br>

<tr style="display: "><td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr><td width="18px" align="left">
<a href="javascript:toggle('test4', 3)">
<img alt="Hier klicken um die restlichen Infos anzuzeigen" title="Hier klicken um die restlichen Infos anzuzeigen" src="../bilder/down.gif" border="0" id="hid4" style="position: relative; left: -2px;"/></a>
</td>
<td align="left">
<span class="smalltext"><b>Ich bin so geil 14</b></span>
</td></tr></table></td></tr>

<tr><td><div style="display:none;" id="test4">
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
dieser text erscheint erst beim klicken<br>
</div></td></tr>
```


Und bitte beachte beim Verfassen deiner Beiträge den Punkt 15 unserer Netiquette bzgl. der Groß- und Kleinschreibung. Vielen Dank.


----------



## Quaese (13. Januar 2007)

Hi,

die gleiche Funktionalität aber ohne Tabellen und mit deutlich weniger Quellcode.

Mit jedem zusätzlichen Togglebereich werden die Integerwerte am Ende der IDs bei Bilder und Einblendebereich um Eins 
erhöht. Der neue Integerwert wird der Togglefunktion übergeben.

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
.toggleHead a{ text-decoration: none;}
.toggleHead a img{ border: none;}
.toggleDiv{ display: none;}
 //-->
</style>
<script type="text/javascript">
  <!--
function toggleIt(intID){
  var objHelp = document.getElementById("toggleID_" + intID);

  with(document.getElementById("toggleID_" + intID).style){
    document.getElementById("imgID_" + intID).src = (display=="block") ? "../bilder/down.gif" : "../bilder/up.gif";
    display = (display=="block") ? "none" : "block";
  }
}
 //-->
</script>
</head>
<body>
<!-- Toggle 1 -->
<div class="toggleHead">
  <a href="#" onclick="toggleIt(0);"><img src="../bilder/down.gif" id="imgID_0"></a>
  Überschrift
</div>
<div id="toggleID_0" class="toggleDiv">
  Dummytext<br>Dummytext
</div>

<!-- Toggle 2 -->
<div class="toggleHead">
  <a href="#" onclick="toggleIt(1);"><img src="../bilder/down.gif" id="imgID_1"></a>
  Überschrift
</div>
<div id="toggleID_1" class="toggleDiv">
  Dummytext<br>Dummytext
</div>

<!-- Toggle 3 -->
<div class="toggleHead">
  <a href="#" onclick="toggleIt(2);"><img src="../bilder/down.gif" id="imgID_2"></a>
  Überschrift
</div>
<div id="toggleID_2" class="toggleDiv">
  Dummytext<br>Dummytext
</div>

<!-- Toggle 4 -->
<div class="toggleHead">
  <a href="#" onclick="toggleIt(3);"><img src="../bilder/down.gif" id="imgID_3"></a>
  Überschrift
</div>
<div id="toggleID_3" class="toggleDiv">
  Dummytext<br>Dummytext
</div>
</body>
</html>
```
Vielleicht kannst Du etwas damit anfangen.

Ciao
Quaese


----------



## sabotaz (23. Januar 2007)

Danke Leute, ich habe das Problem schon gefunden, ich hatte vergessen die arrays zu bennen und bei den Div Containern war auch maches falsch.


----------



## weedo (1. September 2008)

hi, 

ich wollte gerne nochmal das thema aufwärmen, da ich bei mir einen fehler drin habe und ihn nicht finde.

ich hab das ganze in nen ziemlich hässlichen php code eingebaut, deshalb darauf bitte nicht achten 


```
<script language="JavaScript" type="text/javascript">
      var arrLast = new Array('', '', '');  // Array für IDs
      var arrStat = new Array(0, 0, 0);  // Array für Zustände
      
      function toggle(id, intBereich){
          //1:
          if(arrStat[intBereich]==0){
              document.getElementById(id).style.display = 'block';
              document.hid1.src = "minus.gif";
              arrStat[intBereich] = 1;
              arrLast[intBereich] = id;
          }else if((arrStat[intBereich]==1)&&(arrLast[intBereich]==id)){
              document.getElementById(arrLast[intBereich]).style.display = 'none';
              document.hid1.src = "plus.gif";
              arrStat[intBereich] = 0;
              arrLast[intBereich] = id;
          }else{
              document.getElementById(arrLast[intBereich]).style.display = 'none';
              document.getElementById(id).style.display = 'block';
              document.hid1.src = "plus.gif";
              arrStat[intBereich] = 1;
              arrLast[intBereich] = id;
          }
      }
</script>
```


```
<?php 

print "<img src=\"Bilder/spacer.gif\" height=1 width=1>
			  <a href=\"javascript:toggle('navi1', 0)\" id=\"hid1\"><img src=\"img/img__navi/navi_01.gif\" border=\"0\" /></a><br>
        <div style=\"display:none;\" id=\"navi1\">
          <a href=\"index.php?site=home\"><img src=\"img/img__navi/navi_02.gif\" border=\"0\" /></a><br>
          <a href=\"index.php?site=news\"><img src=\"img/img__navi/navi_03.gif\" border=\"0\" /></a><br>
          <a href=\"index.php?site=about\"><img src=\"img/img__navi/navi_04.gif\" border=\"0\" /></a><br>
        </div>";

?>
```

mein problem ist, dass es sich nichtmehr schließen lässt, wenn ich es einmal offen habe. das will nicht.

außerdem möchte ich, dass je nach sektion der teil offenbleibt. soll ich jetzt eine variable bei display: setzen und ihr je nach sektion den wert none oder yes hinzufügen? oder gibt es da ne elegantere lösung?

mfg itzy


----------



## Maik (1. September 2008)

Hi,

dir fehlt aus Quaeses Beispiel diese Zeile:


```
var arrLast = new Array('', '');          // Array für IDs der ausklappbaren Bereiche
var arrIDs  = new Array('hid1', 'hid2');  // Array für Bild-IDs
var arrStat = new Array(0, 0);            // Array für Zustände (0: eingeklappt; 1: ausgeklappt)
```
Und achte in deinen Beiträgen bitte etwas mehr auf die Groß- und Kleinschreibung, wie in der Netiquette Nr.15  erwünscht, und in deiner Signatur angewandt, vielen Dank.

mfg Maik


----------



## weedo (1. September 2008)

Danke für den Tipp.

Ich entschuldige mich vielmals für meine fehlende Groß- und Kleinschreibung. Ich war schon länger nichtmehr hier im Board und habe vergessen das hier großer Wert darauf gelegt wird. Ich werde in Zukunft darauf achten.

Um nochmal auf meine zweite Frage zurück zu kommen:

Da ich jetzt 5-6 Kategorien habe, die mir sehr viel Platz nehmen, möchte ich nur die Sektion aufgeklappt haben, in der der Benutzer sich zurzeit befindet. Als Beispiel:

Cat -> News
Subs -> News, Newsarchive, Artikel
Cat -> Rechtliches
Subs -> FAQ, Impressum, Kontakt.

Wenn der Benutzer sich im Bereich News aufhält soll er nur die Bereiche News, Newsarchive und Artikel haben. Der Bereich Rechtliches soll weiterhin geschlossen bleiben. Wenn er sich nun jedoch im Bereich Rechtliches bewegt soll dieser Bereich geöffnet sein, während die anderen Geschlossen sind.

Wie kann ich das bewerkstelligen?

lg weedo


----------



## Maik (1. September 2008)

Genau das macht doch das Script.


```
var arrLast = new Array('','');          // Array für IDs der ausklappbaren Bereiche
var arrIDs  = new Array('hid1','hid2');  // Array für Bild-IDs
var arrStat = new Array(0, 0);            // Array für Zustände (0: eingeklappt; 1: ausgeklappt)

function toggle(id, intBereich){
    // Fall der angeklickte Bereich eingeklappt ist
    if(arrStat[intBereich]==0){
            // Bereich ausklappen und Einklapp-GIF einblenden
      document.getElementById(id).style.display = 'block';
      document.getElementById(arrIDs[intBereich]).src = "../bilder/up.gif";
      // Bereich als ausgeklappt markieren
      arrStat[intBereich] = 1;
      // ID des ausgeklappten Bereichs merken
      arrLast[intBereich] = id;
    // Falls der angeklickte Bereich ausgeklappt ist und wieder geschlossen werden soll
    }else if((arrStat[intBereich]==1)&&(arrLast[intBereich]==id)){
      document.getElementById(arrLast[intBereich]).style.display = 'none';
      document.getElementById(arrIDs[intBereich]).src = "../bilder/down.gif";
      arrStat[intBereich] = 0;
      arrLast[intBereich] = id;
    }else{
      document.getElementById(arrLast[intBereich]).style.display = 'none';
      document.getElementById(id).style.display = 'block';
      document.getElementById(arrIDs[intBereich]).src = "../bilder/down.gif";
      arrStat[intBereich] = 1;
      arrLast[intBereich] = id;
    }
}
```


```
<a href="javascript:toggle('navi1', 0)" id="hid1"><img src="img/img__navi/navi_01.gif" border="0" />toggle navi1</a><br>
<div id="navi1" style="display:none;">navi 1</div>
<br>
<a href="javascript:toggle('navi2', 0)" id="hid2"><img src="img/img__navi/navi_01.gif" border="0" />toggle navi2</a><br>
<div id="navi2" style="display:none;">navi 2</div>
```

mfg Maik


----------

