Kacheln, die bei Klick verschwinden und Text zeigen

timoefeu

Hallo liebe Community,

ich bin gerade an einer WordPress Seite und möchte dort eine Unterseite mit den Leistungen einer Firma darstellen. Im Layout sind Kacheln (Bild mit Text darauf) vorgesehen, die bei Draufklicken verschwinden und den Text (Text und ein Dropdown) darunter anzeigen. Es gibt mehrere Kacheln, es soll aber immer nur eine gleichzeitig verschwunden sein. Bilder habe ich zur Erklärung angehängt.

Über Ideen zur Umsetzung bin ich sehr dankbar!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Sowas nennt man Flipbox. Beispiele gibt es z. B. hier:
https://codepen.io/syedrafeeq/pen/eCkFt
https://codepen.io/desandro/pen/LmWoWe

timoefeu

danke, das ist es quasi. "Nur" eben mit dem Bild und ohne Animation (kein Flip). Und on Click, nicht bei hover.

SirEctor

Meinen zweiten Link hast du gesehen? Der ist schon mit Click. Und wenn du bei transition:transform 0s schreibst, hast du keine Animation.

timoefeu

danke der 2. Link sieht gut aus. Aber es funktioniert nur bei der ersten Kachel, alle anderen drehen sich nicht um. Idee?

SirEctor

Dazu bräuchten wir einen Link zu deiner Seite.

timoefeu

im Grund ist es das gleiche wie hier, hab's nur um ein Zweites erweitert und auch den JS-Code dupliziert:
https://codepen.io/moellerfeuer/pen/vawmde

Es scheint so zu gehen.
Aber bei 8 Kacheln bläht es den Code halt auf.

Wäre schön, wenn man nur 1 gleichzeitig umdrehen könnte :)

SirEctor

Versuch es so: https://codepen.io/anon/pen/ZjNxMK

timoefeu

Danke nochmals :)
..Ansich super, hab es hinbekommen. Aber im Safari funktioniert es nicht, da spiegelt sich die front nur :(
Betrifft Desktop und mobile. Firefox/Chrome funktioniert.

SirEctor

Gib uns mal einen Link. Ich selber nutze den Safari nicht. Aber evtl. kann hier jemand anderes helfen.

SirEctor

Versuch mal bei .card__face noch zusätzlich -webkit-backface-visibility: hidden;

timoefeu

Klappt. Vielen Dank.

timoefeu

Doch noch eine Sache:
Damit es das card flip funktioniert, musste ich jquery einbinden ( https://cdnjs.cloudflare.com/ajax/libs/jque…1/jquery.min.js ).
Leider funktionieren dann aber meine "Dropdown-Elemente" nicht mehr auf der selben Seite. Die Dropdowns stammen übrigens aus meinem WordPress-Theme und sind dort fertige Module.

Kann ich das Ganze minimieren, so dass ich nicht diese jquery.min.js benötige?

SirEctor

Gib uns einen Link zur Seite, dann könnten wir mal schauen was stört.

timoefeu

danke, das ist nett.

https://www.moellerfeuerstein.de/test/

SirEctor

Du hast jquery 1.12.4 (Original WordPress) und 3.3.1 (Cloudflare). Wenn ich deine Version in codepen.io teste, läuft die auch mit 1.12.4. Du brauchst mMn die Version 3.3.1 nicht.

timoefeu

Ich habe die Einbindung der 3.3.1 auskommentiert und nun funktioniert das Dropdown wieder, aber eben das Card Flip nicht (Fenster kleiner ziehen, dann erscheinen die richtigen Cards).

SirEctor

Versuch dein Script mal so in etwa einzubinden:

PHP

<script>
jQuery(document).ready(function($) {
$(".card").click(function(){
    $(this).toggleClass('is-flipped')
});
});
</script>

timoefeu

das war's, vielen Dank!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Kacheln, die bei Klick verschwinden und Text zeigen

Jetzt mitmachen!