# Láthatóság: JS-események

> A JS-események eseményindító: elemek megjelenítése vagy elrejtése kattintásra, egérmozgásra vagy az oldal betöltésekor.

A **JS-események** szakasz lehetővé teszi, hogy egy elem egy másik elemen végzett művelet (például kattintás vagy rávitt egér) hatására jelenjen meg vagy tűnjön el, opcionálisan animációval. A főtartalom váltogatható például egy gomb kattintásával, rávitt egérrel vagy dupla kattintással.

![A JS-események szakasz a Keep HTML bekapcsolására figyelmeztető üzenettel](./kepek/lathatosag-js-esemenyek.webp)

*A JS-események szakasz a Keep HTML bekapcsolására figyelmeztető üzenettel* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=elementor)

A képen a szakasz figyelmeztetése látszik: a „Keep HTML” beállítás (magyarul **HTML megtartása**) bekapcsolásához eseménykiváltót kell használni.

A használatához az elem **Láthatóság** fülén be kell kapcsolni a **HTML megtartása** beállítást.

## Példa: videók váltogatása gombokkal

Három videó widget között gombokkal váltasz:

1. Add ugyanazt a választót (például `.data`) a videó widgeteknek.
2. Húzz be gomb widgeteket, és adj nekik egyedi választót (például azonosítókat: `#animals`, `#cities`, `#browsers`).
3. Menj az egyes videó widgetekhez, nyisd meg a **Láthatóság** fület, kapcsold be a **Láthatóság** kapcsolót, és a **HTML megtartása** beállítást állítsd Igenre.
4. Az események beállításainál add meg az adott widget kiváltóját. Például az „állatok” videónál a kiváltó elem mezőjébe `#animals` kerül.
5. A többi elem elrejtéséhez használd a videó widgetek közös választóját (nálunk `.data`).

Az elemeket egy külső elem (például gomb vagy kép) egyetlen kattintása jeleníti meg vagy rejti el, amelyet jQuery-választóval (azonosító vagy osztály) adsz meg. Ha a teljes widgetre állítasz be CSS-azonosítót az Elementor Haladó fülén, jobb, ha kiváltóként ezt adod meg:

```text
#my_button a
```

Amikor az elem megjelenik, egy másik elemet el is rejthetsz.

## Példa: szakasz megjelenítése és elrejtése gombbal

Egy gombra kattintva megjeleníthetsz vagy elrejthetsz egy szakaszt, oszlopot, tárolót vagy bármelyik widgetet.

1. A megjeleníteni kívánt elem **Láthatóság** fülén kapcsold be az eseményindítót (**JS-események**), a **HTML megtartása** beállítást állítsd Igenre, a **Megjelenítési mód** legyen „megjelenítés”. Ha elrejteni akarsz egy elemet az esemény hatására, a megjelenítési mód lehet „elrejtés” is, és a logikai összekapcsolással több eseményindítót is összeköthetsz.
2. Nyisd meg az események fület, és válassz eseményt a listából. A példában a **Click** esemény szerepel.
3. Az **Eseményindító** mezőbe írd be annak az elemnek a választóját, amely a megjelenítést kiváltja, például `#showcoffee`. Gyermekelemre is mutathatsz, például `#showcoffee a`.
4. Az **Animáció megjelenítése** listából válassz animációt, például a Fade-et.
5. Ha az esemény bekövetkeztekor más elemeket is el akarsz rejteni, a **Más elemek elrejtése** mezőbe írd be azok választóját, például `#coffeeimage` vagy `.coffeeimage`.
6. A **Kapcsoló** beállítást állítsd Igenre, ha azt szeretnéd, hogy az esemény az elemet egyszer megjelenítse, másszor elrejtse.
7. A **Tartalékérték** beállítással tartalmat is megjeleníthetsz arra az esetre, amikor az esemény nem következett be.
8. Végül add meg az eseményindító elemet. Bármi lehet, a példában egy gomb: a gomb **Haladó** fülén a **CSS-azonosító** mezőbe írd be az azonosítót (`showcoffee`), amelyet az eseményindítónál is használtál.

## Események

| Esemény | Mikor indul |
| --- | --- |
| Click | Az eseményt kiváltó elemre kattintáskor vagy koppintáskor. |
| Mouseover | Az eseményt kiváltó elem fölé vitt egérrel. |
| Dbclick | Az eseményt kiváltó elemre duplán kattintva. |
| Touchstart | A telefon képernyőjének bárhol megérintésekor. |
| Touchmove | Ha az ujjadat az eseményt kiváltó elemen tartod, és közben görgetsz. |

## Betöltéskor

Az esemény az oldal betöltésekor is lefuttatható a megadott késleltetéssel és animációval.