Ergebnis 1 bis 3 von 3

Thema: Slide Toggle

  1. #1
    HTML Newbie
    Registriert seit
    04.09.2016
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Slide Toggle

    Hallo liebe Community,
    ich habe eine hoffentlich bescheidene Frage an euch, die mich allerdings zur Verzweifelung treibt.

    Ich möchte, wie im folgenden Quellcode ersichtlich eine SlideDown Funktion (nur in HTML, ohne CSS) auf meine Seite einbauen.

    HTML-Code:
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script> 
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideToggle("slow");
        });
    });
    </script>
    
    <style> 
    #panel, #flip {
        padding: 5px;
        text-align: left;
        background-color: #FFFFF;
        border: solid 1px #FFFFF;
    }
    
    #panel {
        padding: 10px;
        display: none;
    }
    </style>
    
    
    </head>
    <body>
     
    <FONT SIZE="4"><strong><font color="#27A8C7"><u><div id="flip">Was ist ein Schulranzen?</div></u></font></FONT></strong>
    <div id="panel">Als Schulranzen bezeichnet man eine auf dem Rücken getragene Tasche, in welcher die Schulmaterialien transportiert werden. Auch bekannt ist der Schulranzen unter den Bezeichnungen Tornister,
            Schulsack, Büchertasche oder Schultasche.</div>
    
    
    </body>
    
    Das funktioniert auch alles soweit und entspricht meiner Vorstellung.
    Wenn ich jetzt allerdings unterhalb dieser ersten Frage "Was ist ein Schulranzen?", eine bzw. mehrere weitere Fragen einfügen möchte, dann funktioniert das SlideDown nicht mehr und ich weiß nicht warum.
    Beispiel:

    HTML-Code:
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script> 
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideToggle("slow");
        });
    });
    </script>
    
    <style> 
    #panel, #flip {
        padding: 5px;
        text-align: left;
        background-color: #FFFFF;
        border: solid 1px #FFFFF;
    }
    
    #panel {
        padding: 10px;
        display: none;
    }
    </style>
    
    
    </head>
    <body>
     
    <FONT SIZE="4"><strong><font color="#27A8C7"><u><div id="flip">Was ist ein Schulranzen?</div></u></font></FONT></strong>
    <div id="panel">Als Schulranzen bezeichnet man eine auf dem Rücken getragene Tasche, in welcher die Schulmaterialien transportiert werden. Auch bekannt ist der Schulranzen unter den Bezeichnungen Tornister,
            Schulsack, Büchertasche oder Schultasche.</div>
    
    <FONT SIZE="4"><strong><font color="#27A8C7"><u><div id="flip">Welche Schulranzen für 1. Klässler?</div></u></font></FONT></strong>
    <div id="panel">Die Sicherheit der Kinder auf dem Schulweg steht an oberster Stelle. Beim Kauf des ersten Schulranzens sollten sie also auf die DIN-NORM 58124 achten, welche beinhaltet, dass ausreichend
            Reflektoren am Schulranzen angebracht sind. Achten sie auch auf helle, gut sichtbare Farben. Schultergurte und Rückenteil sollten gut gepolstert sein. Zu lange Riemen können gerade bei
            kleinen Kindern eine Stolpergefahr darstellen. Manche Modelle verfügen über kleine Laschen, in denen die Riemen eingehakt werden können. Die Verschlüsse sollten einfach zu öffnen sein. Eine
            gute Standfestigkeit ist beim Toben in den Pausen vom großem Vorteil.</div>
    
    
    
    </body>
    
    Ich hoffe mir kann jemand helfen und es eventuell auch sichtbar in meinem Quellcode verändern, bin da noch ein ganz schöner Anfänger, was das alles angeht
    Ich bedanke mich schon im Vorraus.

    Gruß tschapo
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    HTML Newbie
    Registriert seit
    04.06.2016
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Slide Toggle

    Zitat Zitat von tschapo Beitrag anzeigen
    Ich möchte, wie im folgenden Quellcode ersichtlich eine SlideDown Funktion (nur in HTML, ohne CSS) auf meine Seite einbauen.
    Nur mit HTML ist das nicht möglich, zudem verwendest du hier neben HTML auch JavaScript(jQuery) und dieses verwendet für die Animationen CSS.

    Das Problem hier ist, das du eine id immer nur einmal verwendet darfst.

    Hier eine Lösung, wie ich es umsetzten würde. Du solltest dir nur sinnvolle Namen für die Klassen überlegen.

    https://jsfiddle.net/frtxzvwu/

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    04.09.2016
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Slide Toggle

    Perfekt, vielen vielen Dank!
    Hat alles geklappt!

Ähnliche Themen

  1. .toggle will nicht wie ich will
    Von Gero im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 01.03.2013, 19:28
  2. jquerry und toggle
    Von Einste1n im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 02.11.2008, 17:17
  3. Toggle/Spoiler
    Von Ralf Wedmann im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 30.05.2008, 21:17
  4. toggle für Trottle
    Von Questionmark im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 23.11.2006, 03:10
  5. Toggle Script
    Von Stinki im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 20.06.2006, 22:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •