# toggle details



## ggenesiss (30. März 2003)

soo ich suche nach toggle details

wie auf http://www.mymtw.de 
in den news kann man bestimmte bereiche aufklappen
meistens ist es dann so ein symbol [+]

wie macht man soetwas?


----------



## Fabian H (30. März 2003)

Schon wieder CS 

Naja, jedenfalls machst du das mit JavaScript:

```
<script type="text/javascript">
var stat = 0;
function toggle() {
  if (stat == 0) {
    window.document.getElementById("hid").style.display = "block";
    window.document.getElementByid("plussymb").innerHTML = "-";
    stat = 1;
  } else {
    window.document.getElementById("hid").style.display = "none";
    window.document.getElementByid("plussymb").innerHTML = "+";
    stat = 0;
  }
}
</script>

...

bla bla text bla bla
<br><br>
<span style="cursor:hand;" onClick="toggle();" id="plussymb">+</a>
<br>
<div style="display:none;" id="hid">
  bla, diueser text erscheint erst beim klicken bla
  <br>
  <br>
  bla
</div>
```


----------



## ggenesiss (30. März 2003)

thx


----------



## Fabian H (30. März 2003)

Und das nächste mal: Im richtigen Forum posten


----------



## ggenesiss (31. März 2003)

hab es nun getestet und da sag ich nur "Fehler auf der Seite" 

sobald ich auf "+" drücke, erscheint der text. jedoch zeigt er mir dann auch noch an, dass die site ein fehler hat. außerdem kann ich es nicht durch ein "-" zusammenziehen lassen


----------



## ggenesiss (31. März 2003)

<script type="text/javascript">
function toggle(a) {
if (a.style.display =='') {
a.style.display = 'none';
}
else {
a.style.display='';
//b.style.display='none';
}
}
</script>

...

bla bla text bla bla
<br><br>
<a onMouseUp="toggle(name1)" style="cursor: hand;">asde</a>


<br>
<div id="name1" style="display:none">
  bla, diueser text erscheint erst beim klicken bla
  <br>
  <br>
  bla
</div>


so das ist eine lösung


----------



## Fabian H (31. März 2003)

Es lag abba nicht an dem onMouseUp???

[edit]Etz abba mal so theoretisch kann es irgendwie nicht funzen .
Weil:
- du _name1_ als Konstante/Variable übergibst und nicht als String
- du direkt das a (also name1) benuzt, ohne es per document.GetElementById order per document.all anzusprechen.

Funktioniert es trozdem? Und auch in anderen Browsern als dem IE?


----------



## pGFlo (9. Juni 2003)

im IE gehts, unter Netscape wie's scheint nicht  weis jemand vielleicht ne Lösung für das Problem mit Netscape?


----------



## Blumenkind (9. Juni 2003)

wer benutzt schon netscape?

mit mozilla gehts ohne probleme


----------



## Andreas Gaisbauer (10. Juni 2003)

> _Original geschrieben von Nuinmundo _
> *Es lag abba nicht an dem onMouseUp???*



Ich hab dein Script jetzt angepasst - funktioniert nun auch im Netscape... Das mit den + un d - muss man leider mit Gif´s lösen, bzw es ist am einfachsten mit Gif´s zu machen...


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

<img src="plus.gif" onClick="toggle();" name="hid1" /> DemoHeadline
<br>
<div style="display:none;" id="hid">
  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>
```

ciao


----------



## cyberk (23. September 2003)

hmmm aber wenn man jetz z.B.
2 "news" macht dann passiert folgendes:
klickst du auf das erste plus(erste news lesen) -> öffnet er die ersten news
klickst du auf das 2. plust(2. news lesen)-> öffnet er trotzdem die ersten news


----------



## Andreas Gaisbauer (24. September 2003)

Ja, ist klar. Eine ID muss einzigartig im gesamten HTML Dokument sein. Wenn man den selben Namen öfters benutzen will muss man über "name" gehen - dann ist aber der Ansatz ein etwas anderer (etwas komplizierter)...

ciao Andreas


----------



## fAde (9. Oktober 2003)

und wie mach ich das, nu konkret wenn ich da mehrere toggles auf einer seite haben will? hab versucht das umzuschreiben, hat aber nicht gefunzt  wär echt mega cool, wenn das wer aufschreiben könnte...


----------



## Andreas Gaisbauer (9. Oktober 2003)

Hallo Fade,

versuche mal folgendes

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

var last = '';
var stat = 0;

function toggle(id){
    //1:
    if(stat==0){
      document.getElementById(id).style.display = 'block';
      stat = 1;
      last = id;
    }else if((stat==1)&&(last==id)){
      document.getElementById(last).style.display = 'none';
      stat = 0;
      last = id;
    }else{
      document.getElementById(last).style.display = 'none';
      document.getElementById(id).style.display = 'block';
      stat = 1;
      last = id;
    }
    
    document.test.stat.value = stat;
    document.test.Id.value = id;
    document.test.last.value = last;
}

</script>

</head>

<body>
<a href="#" onClick="toggle('test1')">+</a> DemoHeadline 1
<br>
<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>

<a href="#" onClick="toggle('test2')">+</a> DemoHeadline 2
<br>
<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>
</body>
</html>
```

bye Andreas

PS: Achte bitte auf Punkt 12 unserer Netiquette


----------



## unaimed (25. Juni 2004)

hm allerdings werden bei unserem Newsscript die ID`s automatisch zugeteilt wie soll ich das dann machen ?
PS: will alles in PHP schreiben mit "echo"


----------



## Fabian H (25. Juni 2004)

Suchen heisst nicht, einen halben Jahr alten Thread auszugraben.

Und was ist das Problem, wenn du alles automatisch machst?

```
<?php

for ($i=0; $i<10000; $i++) {
    ?>
<a href="#" onClick="toggle('test<?php print($i); ?>')">+</a> DemoHeadline <?php print($i); ?>
<br>
<div style="display:none;" id="test<?php print($i); ?>">
Testtext
</div>
<br />
<br />
    <?php
}

?>
```
Erzeugt dir dynamisch 10,000 Toggle-Boxen. Ist das genug?


----------



## unaimed (25. Juni 2004)

```
if($row->bodynews != "")
    {
    echo "<a href=\"javascript:toggle('test1', 'hid1', 0)\">";
    echo "<img src=\"plus.gif\" border=\"0\" id=\"hid1\" style=\"position: relative; left: -2px;\"/>";
    echo "</a>";
    echo "<span class=\"smalltext\"><b>read more</b></span>";
    echo "<div style=\"display:none;\" id=\"test1\">";
    echo "<br>".$row->bodynews."</td></tr>";
    echo "</div>";
    }
```
 so sieht mein jetziger code aus.
wie kann ich denn jetzt es so machen wie ihr es meint ?

€: wie kann ich denn irgendwie die id auslesen der news ?
mit $id oder id oder keine ahnung


----------



## unaimed (25. Juni 2004)

ahhh jetzt funktioniert es 
habe jetzt was mit $row->id hingeschrieben anstatt test1 
Allerdings wenn ich beim 2ten news auf das Plus klicke ändert sich das symbol nur beim ersten news

€: siehe hier: http://www.my-mts.de/news/news.php


----------



## Antrax (29. Oktober 2004)

Hallo, ich beschäftige mich momentan auch mit diesem Thema, und habe diesbezüglich noch eine Frage.

Habe den unten geposteten Script ausprobiert, welcher auch sauber und ordnungsgemäß läuft.
Allerdings bedrückt mich ein Problem, welches ich gerne beseitigen würde.
Und zwar, wenn ich Block1 und dann Block2 öffne, schließt sich automatisch Block1 wieder.
Ich würde es jedoch gerne so hinbekommen, dass dann beide Blöcke geöffnet sind.

Wie ist dies möglich ? 

Würde mich freuen, wenn mir jemand weiterhelfen kann.


MfG antrax


----------



## CrushLog (29. Oktober 2004)

Ich hab das Script in etwas anderer Form:


```
function ToggleNews (id) {
  if (document.getElementById("NewsC_" + id).style.display == 'none') {
    document.getElementById("NewsC_" + id).style.display = "block";
    document.getElementById("NewsI_" + id).src = "img/navi/collapse.gif";
    document.getElementById("NewsI_" + id).alt = "News einklappen";
 }
  else {
    document.getElementById("NewsC_" + id).style.display = "none";
    document.getElementById("NewsI_" + id).src = "img/navi/expand.gif";
    document.getElementById("NewsI_" + id).alt = "News aufklappen";
  }
}
```

Dann im HTML Teil:


```
echo"<br><a href=\"javascript:ToggleNews('" . $inhalt1[id] . "')\"><img src=\"img/navi/expand.gif\" border=\"0\" id=\"NewsI_" . $inhalt1[id] . "\" alt=\"News aufklappen\"></a> <b>" . $inhalt1[more_title] . "</b>";

echo"<span id=\"NewsC_" . $inhalt1[id] . "\" style=\"display: none\">
<br>Bla2...
</span>";
}
```

Das Ganze ist dann mit netten Bildchen und kommt genau so daher wie bei mtw...


----------

