Frage On click "Icon" ändern für andere Elemente

[Dven]

Guten Tag liebe Community,

ich probiere gerade ein interaktives Image zu erstellen, indem man mehrere Buttons über einem Bild (ist nur ein Platzhalter) liegen hat, um per Klick mehr über das Produkt zu erfahren.

Soweit habe ich alles platziert, wie ich es gerne hätte, läuft noch nicht ganz optimal, aber es geht in die richtige Richtung. Nun müsste ich, wenn ein Element geöffnet wurde, dass die anderen geschlossen werden. Auch dies funktioniert, da ich ja mit (this) das geklickte Element toggle, allerdings habe ich ein "+" und ein "-" in den Buttons, was einem die Möglichkeit gibt bei wiederholtem klicken den Inhalt zu schließen. Wenn ich mehrere Elemente öffne, bleibt das Icon im Button weiterhin auf den "-" Status. Zum Beispiel öffnet man das Element, wird aus dem + ein -, klickt man dann einen anderen Button, soll im zuletzte geklickten Button das "-" wieder zu einem "+". Ich habe momentan keine Idee, wie ich da besten dahin komme. Habt ihr evtl. Vorschläge?

Hier könnt ihr euch das ganze ansehen:
https://jsfiddle.net/Kazel/89haqo0u/6/


Vielen Dank und liebe Grüße!

 

[Dven]

Du musst für die Geschwisterelemente die Klasse, die zwischen "+" und "-" umschaltet, löschen:

        $(".pin-icons").click(function () {

            // Dies schaltet die Klasse "pin-minus" beim geklickten Element um:
            $(this).toggleClass("pin-minus");

            // Dies fehlte: Bei den Geschwisterelemente
            // muss die Klasse "pin-minus" entfernt werden:
            $(this).siblings().removeClass("pin-minus");

            $(this).find('.pin-content').slideToggle(150);

            $(this).siblings().find('.pin-content').hide();
        });

Ich hatte mich dann rumgespielt und es hinbekommen, trotzdem danke für deinen Beitrag! Auch super erklärt mit den Kommentaren, sodass ich es etwas besser nachvollziehen kann.


Vielleicht wärst du so nett und könntest mir nochmal kurz eine Hilfestellung geben. Ich hätte gerne dass wenn ich eben eins der Produkte öffne (also wenn pins-content eingeblendet wird), es irgendwie dynamischer darstellen, sodass z.B. wenn ein Produkt ganz am Rand des Bildes ist, der Inhalt von pins-content nicht hinausragt, was bei overflow hidden z.B. eh nicht funktionieren würde. Nun las ich, dass man das mit position() oder offset() angehen könnte. Zu was würdest du mir an dieser Stelle raten und könntest du mir kurz erklären, ob das problemlos realisierbar ist? .pins-content soll dann einfach den Container mit den Inhalt dementsprechend verrücken, sodass sich das auch an die Auflösung des Gerätes anpasst, weshalb ich z.B. keine fixen Pixelwerte nutzen möchte.


Liebe Grüße

 

[Dven]

Das Problem ist nicht neu, man hat das z. B. auch bei den so genannten Tooltips: Die Position muss so fest gelegt werden, dass das Element vollständig sichtbar ist. Ist z. B. das Element, bei dir der +/- Button, links oben muss man das .pin-content rechts unten davon legen. Was mit absoluter Positionierung kein Problem ist.
Bei dir kommt noch hinzu, dass diese .pin-contents recht groß sind, so dass es passieren kann, dass einige von den +/- Buttons überdeckt werden.
Um all diesen Problemen aus dem Wege zu gehen, empfehle ich, das .pin-content einfach zu zentrieren und mit einem Kreuz bzw. X zum Schließen zu versehen. Dann sind zwar zwei Klicks nötig, um ein anderes zu öffnen aber Überdeckungen sind kein Problem.

Es macht eben nichts aus, wenn es andere Pins überdeckt, weil dafür habe ich das "+" & "-" in den Pins selbst, um eben einen ggf. zu schließen. Wenn es unten raus ragt oder eben oben, ist dies kein Problem, dann steht das Element eh drüber, lediglich die Seiten sind ein Problem, weil ich hierfür kein Overflow haben möchte. Mobile, sprich responsive, werde ich die Elemente vermutlich eh immer nur unten anzeigen, Desktop hätte ich jedoch gerne, dass das Element, sprich der Pin Content, sich nicht nach links oder rechts über das Element legt, sondern dafür in das Innere des Bildes ausweicht. Dafür gibt es eben offset() und position() in Javascript, oder nicht? Sah schon einige Tooltips die das gut lösen, komme aber noch nicht dahinter, wie das genau umgesetzt ist.

Kann es zwar Desktop über feste Werte angeben, aber dann passt es eben bei einer einzelnen Auflösung (z.B. ab 1920px), aber responsive ist das leider nicht, weshalb ich es irgendwie dynamisch mit Javascript probieren möchte.