# Klasszikus harmonika

> Lenyitható tételek a Klasszikus harmonika widgettel: tételek, tartalomtípusok, beállítások.

A **Klasszikus harmonika** widget lenyitható tételeket jelenít meg. Hasznos például gyakori kérdések (GYIK) oldalhoz.

## A widget felvétele

1. Nyisd meg az oldalt az Elementorral.
2. Húzd a **Klasszikus harmonika** widgetet az oldalra. Mintaelrendezést is beszúrhatsz: a bővítmény `dummy-data` mappájából egy `.json` fájlt ([Mintaadatok importálása](https://hub.hellowp.io/hu/plugins/jet-tabs/mintaadatok/)). Ha a JetThemeCore is telepítve van, a harmonika-elrendezést a Magic Button könyvtár **Szakaszok → Accordion** blokkjából is beszúrhatod.
3. A **Tételek** között kattints az első tételre, és add meg a tartalmát.

![A harmonika egyik tétele megnyitva](./kepek/accordion-tetel.webp)

*A harmonika egyik tétele megnyitva* (https://minta-bolt.hu/wp-admin/post.php?post=10&action=elementor)

A képen az első tétel beállításai látszanak, a tartalma szerkesztővel írt szöveg.

## Egy tétel beállításai

| Beállítás | Mit csinál |
|---|---|
| **Aktív** | Bekapcsolva a tétel tartalma nyitva marad az oldal betöltésekor. Kikapcsolva a látogatónak kell rákattintania. |
| **Ikon** | A tétel fejlécében, zárt állapotban megjelenő ikon. |
| **Aktív ikon** | Az ikon, amely nyitott állapotban jelenik meg. |
| **Címke** | A tétel fejléce. Dinamikus értékre is állítható: ha JetEngine-nel készítettél egyéni mezőket, a címet onnan húzhatod be. |
| **Tartalomtípus** | **Szerkesztő** (egyszerű szöveg) vagy **Sablon** (egy korábban elkészített Elementor-sablon, bármilyen tartalommal). |
| **Tartalom** | **Szerkesztő** típusnál a megjelenő szöveg. |
| **Vezérlő CSS ID** | Egyedi azonosító a tétel vezérlőjén. |
| **Add item ID to URL** | A tétel azonosítója bekerül az oldal címébe. |
| **Item Custom CSS Class** | Egyedi CSS-osztály a tételhez. |

**Sablon** típusnál előbb létre kell hoznod a sablont, és csak utána tudod kiválasztani. A kiválasztott sablonon a tétel tetején megjelenő **Sablon szerkesztése** gombbal azonnal változtathatsz: átvisz a sablon oldalára.

Annyi tételt vehetsz fel, amennyire szükséged van; a többit ugyanígy töltsd ki.

## A widget beállításai

![A harmonika beállításai](./kepek/accordion-beallitasok.webp)

*A harmonika beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=10&action=elementor)

| Beállítás | Mit csinál |
|---|---|
| **HTML-címke** | A tételek fejlécének HTML-címkéje. Alapból **div**. |
| **Összecsukható** | Bekapcsolva a nyitott tétel is összecsukható, így az összes tétel zárva lehet. |
| **Megjelenítési effektus** | A tartalom nyitásának és zárásának effektusa: **Nincs**, **Áttűnés**, **Nagyítás**, **Kicsinyítés**, **Felfelé mozgatás**, **Perspektivikus esés**. |
| **AJAX-betöltés használata a sablonhoz** | A sablonokat AJAX-szal tölti be. Lekérdezéssel vagy dinamikus adatokkal ne használd. |
| **GYIK séma** | Gyakori kérdések strukturált adatait adja az oldalhoz. |
| **Görgetés a tartalomhoz** | Nyitás után az oldal a tartalomhoz görget. |

## Stílus

Az Elementorban megszokott módon a **Stílus** fülön külön formázhatod a harmonika tárolóját, a fejlécet, a fejléc mezőit és a tartalmat (színek, tipográfia, térközök). A **Haladó** fülön a margó, a kitöltés és a reszponzív beállítások érhetők el.

## Az eredmény

![A harmonika az oldalon, vendégként nézve](./kepek/accordion-frontend.webp)

*A harmonika az oldalon, vendégként nézve* (https://minta-bolt.hu/jettabs-bemutato/)

A nyitott tétel mellett a zárt tételek a plusz ikonnal jelennek meg.