Kacheln, die bei Klick verschwinden und Text zeigen

    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!

    • Gerade eben
    • Anzeige

    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

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

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Dazu bräuchten wir einen Link zu deiner Seite.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    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.

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

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

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

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

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

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    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.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

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

    Versuch dein Script mal so in etwa einzubinden:

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

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden