Loading...   Upload Image

Kommentare zu Auf/Zu klappen Tutorials » JavaScript Tutorial - Kommentare

 stars
Auf/Zu klappen

Auf/Zu klappen

Author: DJaneMauzi
Datum: 03.06.2009
Schwierigkeit: einfach
Gelesen: 49064

In diesem Tutorial wird erklaert, wie man HTML-Elemente ein und auch wieder ausblenden kann ...
read TutorialTutorial lesen


6 Kommentare Kommentare zu Auf/Zu klappen

  • Huhu. Ich nutze dieses Tutorial schon lnger und habe mich heute etwas hnliches gefragt wie Terra schon vor mir.
    Wenn ich mehrere verschiedene Dinge zum draufdrcken und ffnen habe, kann ich das alles auf eine Stelle ffnen lassen und das Letzte sozusagen berschreiben?

    z.B.: Bild 1 | Bild 2 | Bild 3

    *Hier ist nichts aber wenn oben auf einen der Texte geklickt wird erscheint das jeweilige Bild. Drckt man danach auf einen Weiteren wird das Bild berschrieben. *

    Diese Funktion habe ich auf einigen Staffelpages in der Charakterbersicht und auch schon in einem Forum gesehen. Man knnte es auch mit Tabs im Browser vergleichen.

    kuon ni


    AlyDMaya schrieb am 14.05.2015 um 19:24:10 Uhr
  • Ich habe es mit einer globalen Variable gelst, bei mir schlieen sich auch bereits geffnete Texte wieder, folgendermaen sieht meine Javascript-Datei aus:

    var togcache; // ich nannte die Variable togcache, da sie die Speichervariable (=Cache) der Funktion toggle ist
    
    function toggle(control)
    {
       if(!togcache) // !togcache heit, wenn die Variable togcache leer, 0 oder undefiniert ist, dann ist die Aussage wahr
       {
          togcache = document.getElementById(control);
          togcache.style.display = "block";
       }
    
    // die obige if-Funktion sorgt dafr, dass das Element mit der ID control in togcache gespeichert wird und anschlieend der Text angezeigt wird.
    
       else
       {
          if(togcache != document.getElementById(control))
          {
             togcache.style.display = "none";
             togcache = document.getElementById(control);
             togcache.style.display = "block";
          }
    
    // obige if-Funktion sorgt dafr, dass, wenn der Benutzer ein sich einen anderen Text anzeigen lassen will, der bisher geffnete geschlossen und der neue Text angezeigt wird
          else
          {
    // ab hier ist der Rest der selbe Code wie der von DJaneMauzi
             if(togcache.style.display == "none")
             {
                togcache.style.display = "block";
             }
             else
             {
                togcache.style.display = "none";
             }
          }
       }
    }


    KratosAurion schrieb am 02.12.2014 um 12:55:35 Uhr
  • Hallo!

    Das Beispiel hier, hat mir wirklich geholfen! Gerne wrde ich einen Slideeffect beim Aufklappen des Textes haben wollen, und wenn ein Text offen ist, und ich einen weiteren anklicken, dass der offene Text geschlossen wird und den angeklickten, geschlossenen Text, geffnet wird.

    Hier habe diesen Code bisher zusammen, aber ich komme bei dem slideeffect einfach nicht weiter. Wie muss der Code aussehen? Ich wre unendlich dankbar, wenn du mir dabei helfen knntest!

    <h2 style="text-align: center;">Zahlungsmodalit&auml;ten</h2>
    <p style="text-align: left;">Hier finden Sie unsere akzeptierten Zahlungsm&ouml;glichkeiten.</p>
    <p style="text-align: left;">Bitte beachten Sie unsere besonderen Bedingungen bei den Zahlungsm&ouml;glichkeiten "Rechnung", "Lastschrift" und "Kreditkarte".</p>
    <script type="text/javascript" language="JavaScript">// <![CDATA[
    function toggleDiv(element){
     if(document.getElementById(element).style.display == 'none')
      document.getElementById(element).style.display = 'block';
     else
           document.getElementById(element).style.display = 'none';
    }
    // ]]></script>
    <div style="border: 1px solid #dddddd; width: 480px; text-align: justify;"><a style="display: block; text-decoration: none; padding: 10px;" title="Zahlung per Rechnung" href="javascript:toggleDiv('1');">&#9658; Zahlung per Rechnung</a></div>
    <div id="1" style="display: none; border: #ddd solid dashed 1px; margin-top: 20px; padding: 10px; width: 480px;">
    <p>Hier steht beliebeiger HTML Inhalt.</p>
    <p>Auch Bilder und Links k&ouml;nnen hier stehen.</p>
    </div>
    <div style="border: 1px solid #dddddd; width: 480px; text-align: justify;"><a style="display: block; text-decoration: none; padding: 10px;" title="Zahlung per &Uuml;berweisung" href="javascript:toggleDiv('2');">&#9658; Zahlung per &Uuml;berweisung</a></div>
    <div id="2" style="display: none; border: #ddd solid dashed 1px; margin-top: 20px; padding: 10px; width: 480px;">
    <p>blubb.</p>
    <p>Auch Bilder und Links k&ouml;nnen hier stehen.</p>
    </div>
    <div style="border: 1px solid #dddddd; width: 480px; text-align: justify;"><a style="display: block; text-decoration: none; padding: 10px;" title="Zahlung per Lastschrift" href="javascript:toggleDiv('3');">&#9658; Zahlung per Lastschrift</a></div>
    <div id="3" style="display: none; border: #ddd solid dashed 1px; margin-top: 20px; padding: 10px; width: 480px;">
    <p>blubb.</p>
    <p>Auch Bilder und Links k&ouml;nnen hier stehen.</p>
    </div>
    <div style="border: 1px solid #dddddd; width: 480px; text-align: justify;"><a style="display: block; text-decoration: none; padding: 10px;" title="Zahlung per Kreditkarte" href="javascript:toggleDiv('4');">&#9658; Zahlung per Kreditkarte</a></div>
    <div id="4" style="display: none; border: #ddd solid dashed 1px; margin-top: 20px; padding: 10px; width: 480px;">
    <p>blubb.</p>
    <p>Auch Bilder und Links k&ouml;nnen hier stehen.</p>
    </div>
    <div style="border: 1px solid #dddddd; width: 480px; text-align: justify;"><a style="display: block; text-decoration: none; padding: 10px;" title="Zahlung per PayPal" href="javascript:toggleDiv('5');">&#9658; Zahlung per PayPal</a></div>
    <div id="5" style="display: none; border: #ddd solid dashed 1px; margin-top: 20px; padding: 10px; width: 480px;">
    <p>blubb.</p>
    <p>Auch Bilder und Links k&ouml;nnen hier stehen.</p>
    </div>


    reaper schrieb am 30.10.2014 um 01:47:49 Uhr
  • erstmal is das nen echt tolles tut, muss ich schon sagen ;)
    ich hab nur mal ne frage...wenn man mehrere links in eine tabelle einbinden will...kann man da auch iwie was einstellen das sich wenn man auf einen der links klickt der bereits geffnete wieder verschwindet? ^^
    LG Terra

    Terra schrieb am 15.03.2013 um 14:31:44 Uhr
  • Hallo, ich find das Tut prima, aber wie mache ich das am besten, dass wenn man einen Text ffnet, der letzte geffnete automatisch mit dem ffnen geschlossen wird, so das immer nur ein Text offen ist? LG Rene

    Rene87 schrieb am 28.02.2013 um 16:55:37 Uhr

[ 1 ] 2 » ... Letzte » Seite 1 von 2

Kommentar schreibenHinterlasse einen Kommentar

Du musst angemeldet sein, um einen Kommentar zu hinterlassen...

Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...



       ALL-INKL.COM - Webhosting Server Hosting Domain Provider