Sådan viser eller skjuler du et afsnit på Klik i Elementor

Nøgle takeaways

• Elementor har ingen dedikeret kontrol til at vise eller skjule en sektion ved klik, så de tre arbejdsmetoder er Accordion-widgetten, en widget til at skifte indhold og en knap med et kort script.
• Elementor Accordion-widgetten skjuler alle widgets inde i et element, indtil der klikkes på dets titel, og Standardtilstand indstillet til Alle sammenklappede holder elementet lukket ved sideindlæsning.
• Master Addons Toggle Content-widgetten fungerer som en show and hide-switch, når en af dens to muligheder efterlades tom, og den anden holder sektionen.
• En knap kan vise eller skjule enhver Elementor-beholder med omkring ti linjer JavaScript i en HTML-widget ved at bruge en CSS-klasse på knappen og en på beholderen.
• Elementorvisningsbetingelser og indstillingerne for responsiv skjul reagerer ikke på klik, fordi de bestemmer, hvad der vises efter regel eller efter enhed, før den besøgende gør noget.

For at vise eller skjule et afsnit på klik i Elementor, skal du sætte afsnittet inde i noget, der åbnes, når der klikkes på. Accordion widget gør dette med ingen ekstra plugin. En indholdsskift giver dig en Vis og Skjul switch. En knap med et par linjer script kan afsløre enhver beholder på siden. Elementor har ikke en enkelt “vis på klik” indstilling, så en af disse tre er ruten.

Hver metode nedenfor blev bygget og testet på Elementor 4.3. Vælg efter, hvordan udløseren skal se ud: en titellinje, en kontakt eller en knap.

Hvilken metode passer til din side

Alle tre metoder skjuler et afsnit indtil et klik. De adskiller sig i, hvad den besøgende klikker, og hvor meget opsætning de har brug for.

Metode 1: Accordion-widgetten

Accordion-widgetten er den hurtigste måde at vise et afsnit på klik, fordi hvert element er en beholder, der accepterer enhver widget. Uanset hvad du lægger indeni, forbliver skjult, indtil titlen klikkes.

1. Rediger siden med Elementor, og træk i harmonika widget til hvor den skjulte sektion skal være.
2. Slet de elementer, du ikke har brug for. For én skjult sektion skal du beholde ét element.
3. Skriv den titel, besøgende vil klikke på, f.eks. Vis leveringsoplysninger.
4. Klik inde i elementet og tilføj dit indhold: tekst, billeder, en formular eller et helt containerlayout.
5. åbne lukke op Interaktioner og sæt Standardtilstand til Alle kollapsede.

Grænsen for denne metode er udseendet. Udløseren er altid en titellinje direkte over indholdet. Hvis du har brug for en stylet knap, eller en udløser et andet sted på siden, skal du bruge Metode 3. For flere titeltypografier, den Avanceret Accordion widget er en mulighed.

Metode 2: Et indhold skifter med en tom mulighed

En indholdsskift skifter normalt mellem to blokke. Lad en blok være tom, og den bliver en vis og skjul-kontakt: Den ene etiket viser intet, den anden viser din sektion.

Disse trin bruger Skift indhold fra Master Addons Pro. Vi testede den tomme mulighed på Elementor 4.3, og det efterlader ingen hul eller pladsholder.

1. vod Skift indhold ind på siden.
2. I Elementer liste, mærke det første element Skjul detaljer og slette eksempelteksten, så dens indhold er tomt.
3. Mærk det andet punkt Vis detaljer. Skriv indholdet i editoren, eller sæt skrift til Skabelon og vælg en gemt skabelon for et fuldt layout.
4. åbne lukke op Skift indstillinger og gå Aktivt indeks på 1, så siden indlæses med sektionen skjult.
5. bestemme position til Før, hvis kontakten skal sidde over sektionen, eller Efter at sætte den nedenfor.

Skiftet gør tilstanden indlysende, hvilket passer til valgfrie detaljer som ernæringsfakta, tekniske specifikationer eller vilkår. For at vende det den anden vej, med sektionen synlig først, skal du indstille Active Index til 2.

Skift mellem to sektioner? de Skift indhold widget side har faktureringskontakter, spec-tabeller og otte live-demoer mere.

Metode 3: En knap og et kort script

Brug et script, når udløseren skal være en normal knap, eller når knappen og sektionen er forskellige steder. Du tilføjer én CSS-klasse til knappen, én til sektionen, og indsætter et lille uddrag i en HTML-widget.

1. Tilføj en knap widget. Ind Avanceret > CSS-klasser, type show-hide-button. Lad knappens linkfelt være tomt.
2. Vælg den beholder, du vil skjule. I Avanceret > CSS-klasser, type show-hide-target.
3. Træk en html widget hvor som helst på siden og indsæt koden nedenfor.
4. Opdater siden og test den på 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>

Den første stilregel skjuler beholderen. Den anden viser den, når scriptet tilføjer is-open klasse. Den tredje holder beholderen synlig inde i Elementor editor, så du stadig kan redigere den. Hvert klik på knappen tilføjer eller fjerner klassen.

Tre noter om denne metode. Hver beholder med klassen åbner sammen, så brug forskellige klassenavne, hvis du har brug for separate par på én side. Knapteksten ændres ikke af sig selv. Og hvis et caching- eller scriptoptimeringsplugin forsinker JavaScript, kan det første klik ignoreres, indtil scriptet indlæses.

Hvis sektionen skal åbne over siden, skal du bruge en popup. Se sådan tilføjes en popup i Elementor.

Hvad virker ikke: Display Betingelser og Responsive indstillinger

To Elementor-funktioner lyder som om de skal gøre dette og gør det ikke. Begge skjuler indhold, men ingen af dem reagerer på et klik.

• Responsive indstillinger. Avanceret > Responsive har Skjul På Desktop, Skjul På Tablet og Skjul På Mobil. De skjuler et element efter skærmstørrelse, hele tiden.
• Visningsbetingelser. Elementors udstillingsforhold vis eller skjul et element efter regel, som f.eks. loginstatus, brugerrolle, dato eller browser. Beslutningen træffes, når siden indlæses.

De er de rigtige værktøjer, når siden skal bestemme, hvad en besøgende ser. Vi dækker dem ind Elementor display betingelser, og den Display Betingelser udvidelse side viser hver regel, den understøtter. Når den besøgende skal beslutte, skal du bruge en af de tre klikmetoder ovenfor.

Ofte stillede spørgsmål

Endelige tanker

Der er tre pålidelige måder at vise eller skjule en sektion på klik i Elementor. Brug Accordion-widgeten, når en titellinje er fin, en indholdsskift med én tom indstilling, når du vil have en synlig switch, og en knap med et kort script, når udløseren skal sidde et andet sted.

Hvis du ender med at skifte mellem to sektioner oftere end at skjule en, Skift indholdswidget er bygget til det.

Relateret læsning

• Elementor visningsforhold:vis og skjul indhold efter regel
• Sådan tilføjes en popup i Elementor
• Elementor rulleeffekter
• Sådan oprettes en skifteknap i Elementor (3 måder)
• Elementor toggle vs harmonika vs faner vs indhold switcher