toggle details

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 :(
 
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
 
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...
 
Hallo Fade,

versuche mal folgendes
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';
      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
 
Zuletzt bearbeitet von einem Moderator:
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"
 
Suchen heisst nicht, einen halben Jahr alten Thread auszugraben.

Und was ist das Problem, wenn du alles automatisch machst?
PHP: 
<?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?
 
Code: 
    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
 
Zuletzt bearbeitet:
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
 
Ich hab das Script in etwas anderer Form:

Code: 
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:

PHP: 
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...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück