# Láthatóság: gyakorlati példák

> Elemek megjelenítése vagy elrejtése kategória, gombkattintás, ACF mező értéke vagy hivatkozó webhely alapján.

Négy gyakori feladat, amelyet a **Láthatóság** fül eseményindítóival oldhatsz meg. Mindegyiknél jelöld ki az elemet (szakaszt, oszlopot, tárolót vagy widgetet), nyisd meg a **Láthatóság** fület, és kapcsold be a **Láthatóság** kapcsolót. Az eseményindítók részletes leírása a láthatósági fejezetekben van.

## Elem megjelenítése egy kategória alapján

Ha egy elemnek csak bizonyos bejegyzéstípusban vagy kategóriában szabad látszania, a **Bejegyzés és oldal** szakaszt használd.

1. A **Láthatóság** fülön az **Eseményindítók** között válaszd a bejegyzés és oldal eseményindítót, a **HTML megtartása** maradjon **Igen**, a **Megjelenítési mód** pedig **Megjelenítés** (ha elrejteni akarod, **Elrejtés**).
2. A **Bejegyzés ID** értéke maradjon az aktuális bejegyzés, és a **Bejegyzés típusa** mezőben válaszd ki a kívánt típust (például **Bejegyzések**).
3. Az **Osztályozás (taxonomy)** mezőben válaszd ki az osztályozást (például **Kategóriák**), majd a **Kifejezések** mezőben a kívánt kifejezéseket.

![A Bejegyzés és oldal szakasz a bejegyzéstípus és az osztályozás kiválasztásával](./kepek/gyakorlati-utmutatok-bejegyzes-trigger.webp)

*A Bejegyzés és oldal szakasz a bejegyzéstípus és az osztályozás kiválasztásával* (https://minta-bolt.hu/wp-admin/post.php?post=79&action=elementor)

A képen a **Bejegyzés típusa** mező a **Bejegyzések** értéket, az **Osztályozás (taxonomy)** mező a **Kategóriák** osztályozást mutatja; a **Kifejezések** mezőbe kerülnek a konkrét kategóriák.

## Más-más elem megjelenítése gombonként

Ha több gombbal akarsz ugyanazon a helyen különböző tartalmat mutatni (például három kép közül mindig csak egyet), a **JS-események** szakaszt használd. A példában három kép (1. kép, 2. kép, 3. kép) és három gomb (1. gomb, 2. gomb, 3. gomb) van.

1. Add az egyes gomboknak egyedi azonosítót a **Haladó** fülön: `show1`, `show2`, `show3`.
2. Add mindhárom képnek ugyanazt a CSS-osztályt a **Haladó** fülön, a **CSS-osztályok** mezőben, például `show`.
3. Jelöld ki az 1. képet. A **Láthatóság** fülön kapcsold be a **Láthatóság** kapcsolót, a **HTML megtartása** legyen **Igen**, a **Megjelenítési mód** **Megjelenítés**, az **Eseményindítók** között pedig válaszd a **JS-események** lehetőséget.
4. Nyisd meg a **JS-események** szakaszt, és állítsd be: az esemény legyen **Click**, az **Eseményindító** mezőbe írd az 1. gomb azonosítóját (`#show1`), a **Más elemek elrejtése** mezőbe pedig a közös osztályt (`.show`).
5. Ismételd meg a 2. és a 3. képnél a saját gomb azonosítójával (`#show2`, `#show3`).

Egy gomb kattintásakor így a hozzá tartozó kép megjelenik, a közös osztályú többi kép pedig eltűnik. A sima váltáshoz kapcsold ki az elemeken a megjelenítési animációt és a váltást (toggle).

## Elem megjelenítése ACF mező értéke alapján

Egy elem láthatóságát egy ACF mező értékéhez is kötheted, akár a **Bejegyzésmező** beállítással a **Bejegyzés és oldal** szakaszban, akár a **Dinamikus címke** szakasszal (ACF címkét választva). Az **Állapot** menüben ezek közül választhatsz:

- üres vagy nincs beállítva (**Üres vagy nincs beállítva**);
- van értéke (**Nem üres**);
- kisebb, mint egy érték (**Kisebb, mint**);
- nagyobb, mint egy érték (**Nagyobb, mint**);
- tartalmaz egy szövegrészt (**Tartalmaz**);
- nem tartalmaz egy szövegrészt (**Nem tartalmazza**);
- szerepel egy felsorolásban (**A következők egyike**);
- egyenlő egy értékkel (**Egyenlő**, számoknál hasznos);
- nem egyenlő egy értékkel (**Nem egyenlő**, számoknál hasznos).

Az **Egyenlő** és a **Nem egyenlő** állapotnál, valamint az összehasonlító állapotoknál az **Érték** mezőbe írd az összehasonlítandó értéket.

## Szakasz megjelenítése hivatkozó webhely alapján

Ha egy elemet csak azoknak szánsz, akik egy bizonyos webhelyről (például a Facebookról) érkeznek, a **Felhasználó és szerepkör** szakasz **Hivatkozó** beállítását használd.

1. Jelöld ki az elemet, kapcsold be a **Láthatóság** kapcsolót, a **HTML megtartása** legyen **Igen**, a **Megjelenítési mód** **Megjelenítés**, az **Eseményindítók** között pedig válaszd a felhasználó és szerepkör eseményindítót.
2. Nyisd meg a **Felhasználó és szerepkör** szakaszt, és görgess a **Hivatkozó** beállításhoz.
3. Kapcsold be a **Hivatkozó** kapcsolót.
4. A **Konkrét hivatkozó webhely engedélyezve** mezőbe írd a webhelyeket soronként egyet, például `facebook.com`, `instagram.com`.

![A Hivatkozó beállítás bekapcsolva, két megadott webhellyel](./kepek/gyakorlati-utmutatok-hivatkozo.webp)

*A Hivatkozó beállítás bekapcsolva, két megadott webhellyel* (https://minta-bolt.hu/wp-admin/post.php?post=79&action=elementor)

A képen a **Hivatkozó** kapcsoló **Igen** állású, alatta a **Konkrét hivatkozó webhely engedélyezve** mezőben két webhely áll. A **Csak a host ellenőrzése** kapcsoló azt szabja meg, hogy csak az URL-hosztészt vizsgálja-e. A hivatkozót a látogató böngészője jelenti, ezért az adat hamisítható: csak támpontként használd, bizalmas tartalom védelmére soha.