• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

jquery toggle - bei click, soll nur eins aufgehen - wie?

Ansophie

Mitglied
hallo,

Ich probiere gerade einen show more/show less button, der funktioniert auch, aber wenn ich den dann mehrmals verwende, dann gehen bei einem click auf einen button, alle divs mit diesem toggle auf.

ich habs mit (this) probiert, aber ich hab das, glaub ich, falsch angewendet. außerdem habe ich gelesen, dass "this" nicht zu jquery gehört...mir scheint es wird aber dauernd verwendet?!?

kann mir bitte jemand sagen, wie ich den einzelnen button anspreche, ohne dass ich jeden einzelnen toggle anders benennen muss?

hier das schnipsel:

Javascript:
$(".expand-button").on("click", function(){
        $(".special-text").toggleClass("-expanded");
        if ($(".special-text").hasClass("-expanded")) {
            $(".expand-button").html("Schließen");
        } else {
            $(".expand-button").html("Mehr anzeigen");
        }
    });

lg, ansophie
 
Werbung:
Kannst du mal dein Html dazu zeigen, weil man dann besser sehen kann wie das alles bei dir aufgebaut ist.

"this" geht eigentlich auch wenn man es richtig gemacht hat.

Benutzt du eigentlich auf der Seite schon Jquery , oder nur für diese Funktion jetzt ?
Wenn es nur für die toggle Funktion sein soll dann kannst du auch auf Jquery verzichten und es mit Vanilla Js machen.
Für so nee kleinigkeit kann man ganz gut Jquery verzichten , da es unnutzer Ballast ist was nicht sein muß.
 
hallo basti,
ja ich hab schon jquery Funktionen eingebaut, bis jetzt zwar nur 3 mit 12 Zeilen exkl. dieser hier.

hab mir diese toggle-art auch in vanilla js angesehen und probiert, aber die kam mir sehr komplex vor und habs nicht so gut nachvollziehen können, kann daher auch nicht wirklich beurteilen, was Ballast ist und was nicht.

hier das html

HTML:
<div class="container">
     <div class="banner_border">
          <div class="banner_content">
              <p>Text</p>
              <div class="banner_content_main">
                  <div class="special-text">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dot eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt inre culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                  </div>
                      <button class="expand-button">
                        Mehr anzeigen
                      </button>
                </div>
           </div>
     </div>
</div>
 
Werbung:
Ich bin davon ausgegangen das du den Text auch ein und ausblenden willst.
Da der Button unter den Text steht habe ich parent() benutzt.
Wäre der Text unterhalb des Buttons wäre es einfacher .
Aber das ist ja auch egal.
Das soll ja nur zeigen wie es gehen könnte
 
Zuletzt bearbeitet:
Hey,

@ Sempervivum, deinen pen hab ich mir auch angesehen, das Resultat sieht super aus, aber für js brauch ich mehr zeit. Die Zuordnungen/Zuweisungen in js zu überblicken, hab ich noch nicht so drauf. Aber ich stimme dir zu, es ist definitiv leichter nachzuvollziehen als es bei den anderen Bsp, die ich davor im netz zu diesem Thema durchforstet habe.

Habe mich jetzt mal an Bastis Version angehalten und das am ursprünglichen jqueryschnipsel angewendet.
allerdings habe ich
$checken=$weiter.hasClass("expanded"); if($checken==true)
rausgelassen. geht das oder rächt sich das später?

hab ich das richtig verstanden,
das $plus (bei basti wars $weiter) bekommt die definition ("=").parent().children() und entspricht so dem div "special-text" und seinem Gefolge? wenn ja, dann ist mir bei diesem bsp auch klar, wie das "this" platziert gehört.

was sagt ihr dazu? kann man das so lassen?

Danke!
 
allerdings habe ich
$checken=$weiter.hasClass("expanded"); if($checken==true)
rausgelassen. geht das oder rächt sich das später?

Nicht das ich wüßte. Das es bei dir geht sieht man ja.
Ich mache das immer so weil es schon öfters vor kam das ich direkt nach false fragen mußte.

Das parent und children habe ich so gemacht weil deine Buttons unter den Text sind , also im DOM unter den Text.
Würde man direkt id's ansprechen könnte man sich das sparen.

Wenn man den Button oberhalb des Textes im Dom macht geht es auch ohne parent und children

Vieleicht hilft es dir zu verstehen warum ICH das so gemacht habe
 
Zuletzt bearbeitet:
Werbung:
hey, ich hab doch noch eine Frage dazu.

ich wollte den code aus codepen (#6) in meine Dateien einbetten. Auf codepen funktionierts, in meinen lokalen Dateien aber nicht mehr.

die script library und meine scripts.js Datei ist vor dem </body>-tag eingefügt und weil copy/paste sind Tippfehler eher ausgeschlossen.
die Funktion (wie auch alle anderen) in der js-datei sind vor dem expand-toggle korrekt mit ";" geschlossen, zumindest werden mir formatmäßig keine Fehler angezeigt.

was habe ich übersehen?

lg
 
habe weitere versuche unternommen - ohne erfolg:
von codepen exportieren hat nichts gebracht.
cache löschen auch nicht.
im anderen browser geht es auch nicht.

die Schnipsel waren eigentlich seit #7 in meinen Dateien und haben funktioniert. dann wollte ich das lorem ipsum ersetzen und aus wars mit der funktion.

Hat jemand eine Idee woran das liegen könnte?

lg
 
Wenn es immer ging und nach dem lorem ipsum kram nicht mehr geht dann hast du wohl irgendwas geändert.

Nimm doch mal den ganzen Code den du Lokal nutzt, ( der nicht geht ) und kopiere den in einen neuen Codepen rein .
Wenn es geht dann ist schon mal gut , dann muß man mal weiter kucken warum er bei dir nicht Lokal läuft.

Wenn er bei Codepen nicht geht dann speicher das ab und gib uns mal den Link dazu
 
Zuletzt bearbeitet:
Werbung:
Hey, danke für deine Antwort.

Ich habs probiert - und es funktioniert in codepen tadellos.
Hier trotzdem mal der Link zum neuen pen: https://codepen.io/AnSophie/pen/dyygmvq

habe gelesen, dass es möglicherweise daran liegt, wenn die Seite eben nur lokal mit file:/// geöffnet wird und nicht von einem Webserver aus. Alternativ könnte man einen "lokalen" server installieren (als bsp wurde http-server genannt).
Ich wollt das mit dem lokalen server (https://discussions.apple.com/docs/DOC-250001766) zwar gleich probieren, aber dafür muss man sich mit dem Terminal und Webservern auskennen, und das ist bei mir nicht der Fall.

Alle anderen Funktionen tun was sie sollen (bis auf zwei gelegentlich auftretende bugs, die aber zu 99.9% hiermit nichts zu tun haben).

lg
 
ich glaube das geht bei dir nicht weil du Jquery einbindest über Link ( man muss online sein )
Wenn du jquery auf dein Pc laden tust und das dann einbindest sollte es auch wohl gehen.

Es gibt für den Server kram xamp , das soll auch zimlich einfach sein.
Für html css uns javascript brauch man eigentlich kein Server , das läuft auch so im Browser.
 
Werbung:
Aaaalso,
Hab sowohl einmal die compressed als auch einmal die uncompressed file probiert. Sicherheitshalber habe ich mehrere Anleitungen verglichen und, da alle nach dem selben prinzip liefen, auch entsprechend umgesetzt.
Leider auch diesmal ohne Erfolg - eigentlich wurde es sogar schlimmer, es hat dann nämlich die scrolltop funktion gesponnen, hat sich bei click 1cm raufbewegt und ist dann wieder auf dieselbe stelle zurück.
Library wieder raus und alles -bis auf das eine halt- funktioniert wieder.

Entweder ich hatte bei der Einbettung Fehler gemacht oder ich weiß nicht was da schief läuft.

Hab auch nochmal in chrome einen js-check gemacht, und da wird mir angezeigt, ähnlich lautend wie „failed to ...server not found showing 404“ und dann noch das $plus is not defined, und zwei weitere, die ich im Moment nicht im Kopf hab
Liefert das einen Hinweis?

Lg
 
Für mich hört es sich so an, dass du jQuery nicht richtig eingebunden hast.
Wir machen jetzt noch ein Test und wenn es dann nicht geht, fliegt jQuery raus und du kriegst einen Vanilla Code.

Gehe mal auf den Link und öffne den Quellcode.
*** Link entfernt, weil nicht mehr erreichbar ***

Den kopierst du so wie er ist (nichts ändern) und kopierst ihn dann da hin, wo du den anderen Kram auch hast.
Dann ganz normal wie immer ausführen.
Schau mal in der Konsole, ob dann auch irgendwelche Fehler kommen.
Aber so müsste es eigentlich gehen
 
Zuletzt bearbeitet:
Hey, es funktioniert jetzt aber zeitweise mit einem komischen bug,

aber mal der reihe nach:
aufgeteilt in die entsprechenden Dateien hat zunächst nicht funktioniert.
alles komplett in einer html ohne die anderen Funktionen klappt.

da du die anderen Funktionen nicht drinnen hast, hab ich mir gedacht ich probiere mal, die Funktion von den anderen zu trennen, und hab deinen snippet inkl. $(document).ready(function () ){ .... }); in meine scripts.js eingefügt. der rest bis auf die jquerylibrary ist ja schon rüberkopiert gewesen. dann hats geklappt, dann hat plötzlich gar nichts mehr geklappt außer die Jahresanzeige.

dann wollte ich eben die Antwort schreiben und zwischendurch mal dies und jenes probiert damit ich für euch/mich dokumentieren kann, und war schon dabei die komplette jquery-datei zu posten, weil ich da den wurm drinnen vermutet habe, habs noch mal getestet und siehe da es funktioniert so geschmeidig wie noch nie.

jetzt hab nochmal die live preview neu gestartet, dann funktionierts eine zeit lang nicht - sobald ich die Öffnen/Schließen betätige, was ja funktioniert, kann ich dann nicht mehr scrollen, weder am button noch am Balken, so wie schon in #14 schon beschrieben. wenn ich dann ein paar mal aktualisiere und ein paar Minuten warte, dann funktioniert es wieder super. ich kann alles klicken zumachen aufmachen, scrollen,

kann es sein, dass es nur ewig braucht zum laden - weil wie du sagtest ich sozusagen nicht ständig online bin?
Notiz wieder 10min später: die frage ist auch irgendwie wieder hinfällig, weil sobald ich dann wieder ein bisschen warte, weil ich zb hier Weiterschreibe geht genauso wieder nichts, wie wenn ich die preview erneut aufmache. dann macht es wieder faxen, ich probiere es jetzt nicht nochmal aber, ich gehe davon aus, nach weiteren warten würde es dann irgendwann wieder gehen...

und abgesehen von diesen komischen Phänomen, warum geht es jetzt eigentlich, wo liegt denn der Fehler, wenn sich der Fehler durch das "auslagern" des jquery-snippets innerhalb der datei beheben ließ?

lg

p.s. ich poste den jquery-code jetzt doch, wer weiß vielleicht hab ich ja doch einen Blödsinn geschrieben.:oops:

Javascript:
$(document).ready(function () {
    "use strict";
    $(window).scroll(function () {
        $(this).scrollTop() > 130 ? $("header").addClass("header__shrink") : $("header").removeClass("header__shrink"),
            $(this).scrollTop() > 300 ? $(".btn__scroll-up").fadeIn() : $(".btn__scroll-up").fadeOut()
    }), $(".btn__scroll-up").click(function () {
        return $("html, body").animate({
            scrollTop: 0
        }, 600), !1
    });
    $(".current_year").text((new Date).getFullYear());
});

$(document).ready(function () {
  $(".expand-button").on("click",function(){
        $plus=$(this).parent().children();
        $plus.toggleClass("-expanded");
        if ($plus.hasClass("-expanded")) {
            $(this).html("Schließen");
        } else {
            $(this).html("Mehr anzeigen");
        }
    });
});

wenn du/ihr den html/css haben wollt, dann stell ich das als codepen zur verfügung, da würd ich aber erst morgen dazu kommen. aber kann denn an dem liegen? ich glaube nicht. ich hoffe jetzt mal dass im snippet oben, nur irgendwas falsch geschrieben ist. bzgl. case-sensitiv passt alles - sicher 10mal gecheckt.

tut mir leid wegen der Umstände. Ohne bastis input wär ich schon total verzweifelt. Ich bin froh das es jetzt zumindest grundsätzlich funktioniert. Loren ipsum habe ich übrigens testhalber schon ersetzt - diesmal kein problem. ;)
 
Werbung:
Zurück
Oben