[JS/JQuery/Ajax]Expander erstellen.

  • Hi, könnte mir jemand erklären wie man Expander erstellt? Wenn ich es Google finde ich merkwürdigerweise nur Haarverlängerungen O.o Selbst wenn ich Ajax oder so davor schreibe.
    Und welches ist denn hierfür am leichtesten JS/Ajax oder JQuery?

  • Meiner Meinung nach ist das JQuery UI gut dafür geeignet, die haben extra eine Teilbibliothek dafür.

    Ich bin
    .. seit etwa 2007 in der Webentwicklung tätig, seit 2013 professionell
    .. Erfahrener Entwickler in PHP, Swift, Javascript, Typescript und Ruby. Zusätzlich habe ich Erfahrung in Python, Java, C#, C++, Prolog und einigen esoterischen Programmiersprachen
    .. Luftfahrtenthusiast und Segelflieger

  • #link spricht alle Elemente mit der ID link an, content alle mit der ID content. Das heißt also, dass das Element, welches den Expander öffnen/schließen soll in dem Fall #link ist, und der eigentliche Expander #content.

    Ich bin
    .. seit etwa 2007 in der Webentwicklung tätig, seit 2013 professionell
    .. Erfahrener Entwickler in PHP, Swift, Javascript, Typescript und Ruby. Zusätzlich habe ich Erfahrung in Python, Java, C#, C++, Prolog und einigen esoterischen Programmiersprachen
    .. Luftfahrtenthusiast und Segelflieger

  • Achso... Ok danke. Wenn etwas nicht klappt melde ich mich :)


    Edit: Ja ich habe einen Fehler.
    Es wird trozdem erstellt obwohl es erst erstellt werden soll sobald ich es slide. Außerdem wird es nicht geslidet.
    Hier mal mein jetziger Code.

    JavaScript
    <script type="text/javascript">
                     $('#link').click(function(e) {
                          $('#content').slideToggle();
                     });
                </script>


    PHP
    echo'<label id="content" class="content1">Bewerbungen</label>';
                               echo'<a href="/bewerbungen/admin.php" id="link" class="In-Field3">zum Admin.</a>';


    //Edit: Kann mir keiner helfen?

    2 Mal editiert, zuletzt von Acrio ()

  • Ok danke SSL.
    Habe das Problem nun behoben :) Habe #link mit #content vertauscht xD...
    Aber wie mache ich das 2 Sachen mit dem Expander erstellt werden?
    Das klappt so nämlich nicht.

    PHP
    echo'<fieldset class="Field3">';
                               echo'<label id="content" class="content1">Bewerbungen</label>';
                               echo'<a href="/bewerbungen/admin.php" id="link" style="display:none; top:25px;" class="In-Field3">zum Admin</a>';
                               echo'<a href="/bewerbungen/leader.php" id="link" style="display:none; top:30px;" class="In-Field3">zum Leader</a>';
                          echo'</fieldset>';


    JavaScript
    <script type="text/javascript">
                     $('#content').click(function(e) {
                          $('#link').slideToggle("slow");
                     });
                </script>


    So wird nur das erste (Ich glaube das nennt man expandiert.)
    Habe gemerkt das wenn ich dem 2 eine andere id gebe und mit dieser dann auch .slideToggle mache das es funktioniert. Kann man immer nur einzelnes "Expandieren"?


    Edits
    Nr.1 Habe etwas hinzugefügt.

    Einmal editiert, zuletzt von Acrio ()

  • #link spricht alle Elemente mit der ID link an, content alle mit der ID content.

    Man weiß zwar, was gemeint ist, aber es gibt nur 1 Element mit der ID #link und nur eines mit der ID #content ;)


    @TE: In einen div packen oder .container im Code und class=container nutzen

  • Edit: So funktioniert es fast.

    PHP
    echo'<div id="container" style="display:none;">';
                                    echo'<a href="/bewerbungen/admin.php" id="link" style="top:25px;" class="In-Field3">zum Admin</a>';
                                    echo'<a href="/bewerbungen/leader.php" id="link" style="top:40px;" class="In-Field3">zum Leader</a>';
                               echo'</div>';


    JavaScript
    <script type="text/javascript">
                     $('#content').click(function(e) {
                          $('#container').slideToggle("slow");
                     });
                </script>


    Nur jetzt wird es nicht langsam erstellt sonder ist plötzlich da.

    Einmal editiert, zuletzt von Acrio ()