# Harmonika (Accordion) widget: induló állapot, ikonok és ACF Repeater

> Mi legyen nyitva a harmonika betöltésekor, hogyan adsz ikont a címekhez, és hogyan épül a harmonika ACF Repeater mezőből.

A **Harmonika** (angolul Accordion) widget kérdés-válasz vagy szakaszos tartalmat tesz egymás alá: a cím kattintásra nyitja a hozzá tartozó tartalmat. GYIK-hoz, termékadatokhoz, szabályzatokhoz jó.

## Előkészületek

- Kapcsold be a widgetet: **The Plus Addons → Widgets**, keress rá az **Accordion** szóra, és kapcsold be.
- Az Elementor és a The Plus Addons telepítve és aktív legyen.
- Az elemeket a **Tartalom** fülön veszed fel a **Tartalom forrása → Tételek** módban. Minden elemnek van **Cím** és tartalom mezője; a tartalom lehet szöveg vagy sablon.
- Az ingyenes és a Pro bővítmény különbségei: az induló állapot és a nyitó/záró ikon ingyenes; az **Icons Mind** ikonok, a címenkénti ikon, a **Keresősáv**, a **Görgetés a tetejére**, a **Lépcsőzetes animáció** és az **ACF Repeater** forrás Pro. Az ingyenes bővítményben ezek az opciók frissítési értesítést adnak.

## Az induló állapot: melyik elem legyen nyitva

Alapból az első elem nyitott az oldal betöltésekor. A **Tartalom → Egyéb opció → Aktív fül** mező ezt állítja. Ez az ingyenes bővítményben is működik.

1. Add hozzá a **Harmonika** widgetet és az elemeket.
2. Nyisd meg a **Tartalom → Egyéb opció** szakaszt.
3. Az **Aktív fül** mezőben válaszd ki az induló állapotot (lásd a táblázatot).
4. Tedd közzé az oldalt.

| Érték | Betöltéskor |
| --- | --- |
| **0** | Minden elem zárva |
| **1** (alapérték) | Az első elem nyitva |
| **2, 3, … 20** | A megadott sorszámú elem nyitva |
| All Open | Minden elem nyitva |

![Harmonika, amelynek minden eleme zárva van betöltéskor](./kepek/dobozok-gombok-9-harmonika-zart.webp)

*Harmonika, amelynek minden eleme zárva van betöltéskor* (https://minta-bolt.hu/tp9-harmonika-zart/)

A képen az **Aktív fül** értéke 0, ezért mind a négy kérdés zárva áll.

- A számok 1-től 20-ig mennek: a 20. utáni elem nem lehet az, amelyik nyitva indul.
- Betöltés után egyszerre egy elem nyitott, az „All Open” érték mellett is: a kattintás ilyenkor is egyenként nyit. Ha a látogató az összes elemet egyszerre nyithassa, használd a widget összes elemet kinyitó és összecsukó gombját (Pro).

## Ikonok a harmonikában

Kétféle ikon van: a nyitást és zárást jelző kapcsolóikon, és (Pro) egy ikon minden cím mellett.

### Nyitó és záró ikon

1. Nyisd meg a **Tartalom → Kapcsolóikon** szakaszt, és hagyd bekapcsolva az **Ikon megjelenítése** kapcsolót (alapból be van kapcsolva).
2. Az **Igazítás** mezővel állítsd be, hogy az ikon a cím bal vagy jobb oldalán álljon.
3. Az **Ikonbetűkészlet** mezőben válaszd a **Font Awesome**, a **Font Awesome 5** vagy az **Icons Mind** (Pro) készletet. Mindegyiknél külön ikont adhatsz a zárt és a nyitott (aktív) állapothoz.
4. Ha kell, állítsd be a **Cím HTML-címke** mezőt: a címek HTML-címkéje alapból `div`. GYIK-nál használhatsz `h3`-at, ha az oldalon a szakasz címe `h2`.

### Ikon minden címhez (Pro)

1. Nyiss meg egy elemet a **Tartalom** fülön, és kapcsold be az **Ikon megjelenítése** kapcsolót.
2. Válaszd ki az **Ikonbetűkészlet** értékét és az ikont.
3. Ismételd meg a többi elemnél. Az ikonok kinézetét a **Stílus → Cím** szakaszban állítod.

Az ikonok betűkészletként töltődnek be. Ha az oldalon más semmi nem tölti be a Font Awesome-ot, a widget magától nem teszi meg, és az ikonok üresen maradnak a megjelenő oldalon. Ilyenkor egy másik, betöltött ikonkészletet válassz.

## Harmonika kereshetősége és hatásai

A **Keresősáv**, a **Görgetés a tetejére** és a **Lépcsőzetes animáció** leírása a [Harmonika: keresősáv, görgetés és lépcsőzetes megjelenés](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dobozok-gombok-harmonika-kereses-hatasok/) fejezetben van.

## Harmonika ACF Repeater mezőből (Pro)

Ha a GYIK-ot vagy a termékadatokat egyéni mezőben tárolod, az ACF Repeater minden sora egy harmonikaelem lehet. A tartalmat a bejegyzésben szerkeszted, a harmonika magától frissül.

### Előfeltételek

- **ACF Pro** vagy **SCF** (Secure Custom Fields), mert az ingyenes ACF-ben nincs Repeater mező.
- A Pro bővítmény: ingyenes változatban az **ACF Repeater** forrás frissítési értesítést ad.

### 1. A Repeater mező létrehozása

1. Hozz létre egy mezőcsoportot egy Repeater mezővel, például **Termékadatok** névvel (a mező neve `termekadatok`).
2. Vegyél fel két almezőt: egy **Szöveg** mezőt a címnek (például `cim`) és egy **Szövegterület** vagy **WYSIWYG** mezőt a tartalomnak (például `tartalom`).
3. Állítsd be a megjelenítési szabályt arra a bejegyzéstípusra, amelynek kell, például **Termékek**.

### 2. A sorok kitöltése

Szerkessz egy bejegyzést, és adj hozzá egy sort minden harmonikaelemhez.

### 3. A harmonika megjelenítése

Add hozzá a **Harmonika** widgetet az adott bejegyzéstípus egyedi sablonjához (Elementor Pro Theme Builder, vagy az ingyenes Nexter Builder).

1. A **Tartalom forrása** mezőt állítsd **ACF Repeater** értékre.
2. Az **Ismétlőmező kulcsa** mezőbe írd a Repeater mező nevét (például `termekadatok`).
3. A **Cím** és a **Tartalom** mezőbe az almezők neveit írd (például `cim` és `tartalom`).
4. Mentsd a sablont.

Minden bejegyzés a saját soraiból építi fel a harmonikát.

- Elemenként egy cím- és egy tartalommező használható.
- A widget a megtekintett bejegyzés adatait olvassa, ezért az egyedi sablonba tedd, ne olyan oldalra, amelynek nincs Repeater adata.
- Az ACF-ből épített elemekhez nincs ikon vagy Egyedi ID elemenként.
- Ha a harmonika üres, ellenőrizd, hogy a mezőnevek pontosan egyeznek-e, hogy a bejegyzésnek vannak-e sorai, és hogy olyan bejegyzést nézel-e, amelyre a mezőcsoport vonatkozik.