So zeigen oder verbergen Sie einen Abschnitt auf Klicken Sie in Elementor

Wichtige Erkenntnisse

• Elementor hat keine dedizierte Steuerung, um einen Abschnitt auf Klick anzuzeigen oder auszublenden, daher sind die drei Arbeitsmethoden das Accordion-Widget, ein Content-Toggle-Widget und eine Schaltfläche mit einem kurzen Skript.
• Das Elementor Accordion-Widget verbirgt alle Widgets in einem Element, bis auf seinen Titel geklickt wird, und der auf Alle gestrichene Standardstatus hält das Element beim Laden der Seite geschlossen.
• Das Master Addons Toggle Content Widget fungiert als Show-and-Hide-Schalter, wenn eine seiner beiden Optionen leer bleibt und die andere den Abschnitt hält.
• Eine Schaltfläche kann jeden Elementor-Container mit etwa zehn Zeilen JavaScript in einem HTML-Widget anzeigen oder ausblenden, wobei eine CSS-Klasse auf der Schaltfläche und eine auf dem Container verwendet wird.
• Elementor-Anzeigebedingungen und die Responsive-Hide-Einstellungen reagieren nicht auf Klicks, da sie per Regel oder Gerät entscheiden, was angezeigt wird, bevor der Besucher etwas tut.

Um einen Abschnitt auf Elementor zu zeigen oder auszublenden, setzen Sie den Abschnitt in etwas, das sich beim Klicken öffnet Das Accordion-Widget macht das ohne extra Plugin Ein Content-Toggle gibt Ihnen einen Switch Ein - und Ausblenden Ein Button mit ein paar Scriptzeilen kann jeden Container auf der Seite aufdecken Elementor hat keine einzige Einstellung “auf Klick anzeigen”, also ist eine dieser drei die Route.

Jede Methode unten wurde auf Elementor 4.3 aufgebaut und getestet Wählen Sie danach, wie der Auslöser aussehen soll: eine Titelleiste, einen Schalter oder eine Taste.

Welche Methode zu Ihrer Seite passt

Alle drei Methoden verstecken einen Abschnitt bis zum Klick Sie unterscheiden sich darin, was der Besucher klickt und wie viel Setup er benötigt.

Methode 1: Das Accordion-Widget

Das Accordion-Widget ist die schnellste Möglichkeit, einen Abschnitt auf Klick anzuzeigen, denn jedes Element ist ein Container, der jedes beliebige Widget akzeptiert Was auch immer Sie hineingeben, bleibt verborgen, bis der Titel angeklickt wird.

1. Bearbeiten Sie die Seite mit Elementor und ziehen Sie die Akkordeon Widget dorthin, wo der versteckte Abschnitt sein soll.
2. Löschen Sie die Elemente, die Sie nicht benötigen Für einen versteckten Abschnitt behalten Sie einen Artikel.
3. Geben Sie den Titel ein, auf den Besucher klicken werden, z. B. Lieferdetails anzeigen.
4. Klicken Sie in das Element und fügen Sie Ihren Inhalt hinzu: Text, Bilder, ein Formular oder ein ganzes Containerlayout.
5. Offen Wechselwirkungen und eingestellt Standardzustand zu Alles zusammengebrochen.

Die Grenze dieser Methode ist die Optik, Auslöser ist immer eine Titelleiste direkt über dem Inhalt, wenn Sie einen gestylten Button benötigen, oder einen Auslöser an einer anderen Stelle auf der Seite, verwenden Sie Methode 3. Für weitere Titelstile wird die Erweitertes Accordion-Widget Option ist.

Methode 2: Ein Content-Toggle mit einer leeren Option

Ein Content-Toggle wechselt normalerweise zwischen zwei Blöcken, lassen Sie einen Block leer und es wird ein Show-and-Hide-Schalter: Ein Label zeigt nichts, das andere zeigt Ihren Abschnitt.

Diese Schritte verwenden Inhalte umschalten Von Master Addons Pro. Wir haben die leere Option auf Elementor 4.3 getestet und sie hinterlässt keine Lücke oder Platzhalter.

1. Ziehen Inhalte umschalten Auf die Seite.
2. In der Elemente Liste, beschriften Sie das erste Element Details ausblenden und löschen Sie den Beispieltext, damit sein Inhalt leer ist.
3. Beschriften Sie das zweite Element Details anzeigen Schreiben Sie den Inhalt in den Editor, oder setzen Sie Typ Vorlage und Auswahl einer gespeicherten Vorlage für ein vollständiges Layout.
4. Offen Einstellungen umschalten und gehen Aktiver Index Auf 1, also lädt die Seite mit ausgeblendetem Abschnitt.
5. Einstellen Position bis Vorher, wenn der Schalter über dem Abschnitt sitzen sollte, oder Nachher, um ihn unten anzubringen.

Der Schalter macht den Zustand offensichtlich, was zu optionalen Details wie Nährwertangaben, technischen Spezifikationen oder Begriffen passt Um es in die andere Richtung zu drehen, wobei der Abschnitt zuerst sichtbar ist, setzen Sie den aktiven Index auf 2.

Wechsel zwischen zwei Abschnitten? Die Inhalts-Widget-Seite umschalten Abrechnungsschalter, Spec-Tabellen und acht weitere Live-Demos hat.

Methode 3: Ein Button und ein kurzes Skript

Verwenden Sie ein Skript, wenn der Auslöser eine normale Schaltfläche sein muss, oder wenn die Schaltfläche und der Abschnitt an verschiedenen Stellen sind Sie fügen eine CSS-Klasse zur Schaltfläche hinzu, eine zum Abschnitt, und fügen einen kleinen Ausschnitt in ein HTML-Widget ein.

1. Fügen Sie ein hinzu Knopf Widget. In Fortgeschritten > CSS-KurseTyp show-hide-button. Das Linkfeld des Buttons leer lassen.
2. Wählen Sie den Container aus, den Sie ausblenden möchten In Fortgeschritten > CSS-KurseTyp show-hide-target.
3. Ziehen Sie einen HTML Widget an einer beliebigen Stelle der Seite und fügen Sie den Code unten ein.
4. Aktualisieren Sie die Seite und testen Sie sie am Frontend.

<style>
.show-hide-target { display: none; }
.show-hide-target.is-open { display: flex; }
.elementor-editor-active .show-hide-target { display: flex; }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".show-hide-button a, .show-hide-button button").forEach(function (button) {
    button.addEventListener("click", function (event) {
      event.preventDefault();
      document.querySelectorAll(".show-hide-target").forEach(function (target) {
        target.classList.toggle("is-open");
      });
    });
  });
});
</script>

Die erste Stilregel verbirgt den Container Die zweite zeigt ihn, sobald das Skript die is-open Klasse. Der dritte hält den Container im Inneren des Elementor-Editors sichtbar, so dass Sie ihn noch bearbeiten können Jeder Klick auf den Button fügt die Klasse hinzu oder entfernt sie.

Drei Anmerkungen zu dieser Methode Jeder Container mit der Klasse öffnet sich gemeinsam, also verwenden Sie unterschiedliche Klassennamen, wenn Sie separate Paare auf einer Seite benötigen Der Schaltflächentext ändert sich nicht von selbst. Und wenn ein Caching- oder Skriptoptimierungs-Plugin JavaScript verzögert, kann der erste Klick ignoriert werden, bis das Skript geladen ist.

Sollte sich der Abschnitt über die Seite öffnen, verwenden Sie ein Popup Siehe So fügen Sie ein Popup in Elementor hinzu.

Was nicht funktioniert: Anzeigebedingungen und Responsive-Einstellungen

Zwei Elementor-Features klingen so, als sollten sie das tun und tun es nicht Beide verstecken Inhalte, aber keiner reagiert auf einen Klick.

• Responsive Einstellungen. Erweitert > Responsive verfügt über Ausblenden auf dem Desktop, Ausblenden auf dem Tablet und Ausblenden auf Mobilgeräten. Sie verbergen ständig ein Element nach Bildschirmgröße.
• Anzeigebedingungen. Anzeigebedingungen des Elementors Element für Regel ein - oder ausblenden, wie z.B. Login-Status, Benutzerrolle, Datum oder Browser Die Entscheidung fällt beim Laden der Seite.

Sie sind die richtigen Werkzeuge, wenn die Seite entscheiden sollte, was ein Besucher sieht Wir decken sie ab Elementoranzeigebedingungen, und die Erweiterung der Anzeigebedingungen Seite listet jede Regel auf, die sie unterstützt Wann sich der Besucher entscheiden soll, verwenden Sie eine der drei oben genannten Klickmethoden.

Häufig gestellte Fragen

Letzte Gedanken

Es gibt drei zuverlässige Möglichkeiten, einen Abschnitt auf Klick in Elementor anzuzeigen oder auszublenden Verwenden Sie das Accordion-Widget, wenn eine Titelleiste in Ordnung ist, einen Inhaltsumschalter mit einer leeren Option, wenn Sie einen sichtbaren Schalter wünschen, und eine Schaltfläche mit einem kurzen Skript, wenn der Auslöser woanders sitzen muss.

Wenn Sie am Ende öfter zwischen zwei Abschnitten wechseln, als einen zu verstecken, wird die Inhalts-Widget umschalten Dafür gebaut ist.

Verwandte Lektüre

• Elementor-Anzeigebedingungen: Inhalte per Regel anzeigen und ausblenden
• So fügen Sie ein Popup in Elementor hinzu
• Elementor-Scroll-Effekte
• So erstellen Sie eine Umschalttaste in Elementor (3 Wege)
• Elementor-Kipphebel vs. Akkordeon vs. Tabs vs. Inhaltsumschalter