toggle news script problem :-)

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
 
Hi,

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

  • Script-Code:
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:
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.
 
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.
Code: 
<!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
 
Danke Leute, ich habe das Problem schon gefunden, ich hatte vergessen die arrays zu bennen und bei den Div Containern war auch maches falsch.
 
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 :)

HTML: 
<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: 
<?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
 
Hi,

dir fehlt aus Quaeses Beispiel diese Zeile:

Code: 
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
 
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
 
Genau das macht doch das Script.

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

Neue Beiträge

Zurück