[JS/JQuery/Ajax]Expander erstellen.

Acrio · 21. Oktober 2012

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?

Padarom · 21. Oktober 2012

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

Acrio · 21. Oktober 2012

Hättest du eventuell einen Link für mich?

maddin · 21. Oktober 2012

JavaScript

$('#link').click(function(e) {
	$('#content').slideToggle();
});

Mehr is das nich^^

Acrio · 21. Oktober 2012

Und was muss bei Link und Content rein? Bzw wie setze ich die in php?

Padarom · 21. Oktober 2012

#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.

Acrio · 22. Oktober 2012

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?

SSL · 22. Oktober 2012

Bei dem label: style="display:none;"
Bei dem Link bringt es nicht viel, leitest die Seite ja sofort weiter...

Acrio · 23. Oktober 2012

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

Tion · 23. Oktober 2012

Zitat von Padarom.

#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

Acrio · 23. Oktober 2012

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.

breadfish.de 11. März 2022