# Kibontás (Unfold)

> Összecsukható tartalom: a szöveg egy része látszik, a többit gombbal lehet kinyitni és visszacsukni.

A **Kibontás** (angolul Unfold) widget helyet takarít meg az oldalon: a tartalomnak csak egy részét mutatja, a többit egy gombbal lehet kinyitni, majd újra összecsukni. A **Read More** widgettel ellentétben nem szakaszokat rejt el, viszont visszacsukható, és az összecsukott meg a kibontott állapotot külön is stílusozhatod.

## A widget hozzáadása

1. Nyisd meg az oldalt az Elementorral.
2. Keresd meg a **Kibontás** widgetet az elemlistában, és húzd a kívánt helyre.

![A Kibontás widget beállításai az Elementorban](./kepek/unfold-szerkeszto.webp)

*A Kibontás widget beállításai az Elementorban* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=elementor)

## Beállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Összecsukás** | Ha kikapcsolod, a tartalom folyamatosan nyitva marad. | Nem |
| **Scroll to Top After Hiding Content** | Az összecsukás után a tartalom tetejére görget. | Nem |
| **Scroll to Top Offset (px)** | A görgetés eltolása a tetejétől pixelben (csak az előző kapcsoló bekapcsolt állapotában). | |
| **Fold After a Specified Amount of Time** | Megadott idő után magától összecsukja a tartalmat. | Nem |
| **Autohide time (seconds)** | Az automatikus összecsukásig eltelő idő másodpercben. | |
| **Fold Content on Click Outside Widget** | A widgeten kívüli kattintás is összecsukja a tartalmat. | Nem |
| **Height Type** | Mennyit mutasson az összecsukott állapot. **Fixed Height**: megadott magasságig. **Word Count**: megadott szószámig. | Fixed Height |
| **Zárt magasság** | Az összecsukott tartalom magassága (**px**, **%**, **vh**, **em**, **rem**), a **Fixed Height** típusnál. | |
| **Separator Type** | Az elválasztó a látható és az elrejtett rész között. **DIV**: tömör elválasztó. **Gradient Mask**: lágy elhalványulás. | DIV |
| **Separator Height** | Az elválasztó magassága. A színét a **Stílus** fülön adhatod meg. | |
| **Separator Z-Index** | Az elválasztó rétegsorrendje (**Gradient Mask** esetén nem látszik). | |

A **State Styles** részen az **Összecsukás** és a **Kibontás** állapot animációját külön állíthatod:

- **Időtartam**: az animáció sebessége ezredmásodpercben; nagyobb érték lassabb átmenetet jelent.
- **Easing**: az animáció görbéje: **Linear**, **Sine**, **Expo**, **Circ**, **Back** (a szerkesztőben **Vissza**), **InOutSine**, **InOutExpo**, **InOutCirc**.

## Tartalom

A tartalom lehet szöveg, kép, videó vagy más média. A tartalmat kézzel is megadhatod, dinamikusan is betöltheted egy meta mezőből, vagy egy meglévő sablont is beszúrhatsz.

- **Sablon beszúrása**: a **Content Type** sorban kattints a **Template** gombra (lap alakú ikon), és válaszd ki a sablont a legördülő listából.
- **Dinamikus tartalom**: a szövegmező fölött, jobbra a **Dynamic Tags** gombra kattintva bármelyik forrásból választhatsz adatot.

Ha a JetEngine listaelem beállításainál bekapcsolod a **Hide if empty** opciót, a dinamikus adatot tartalmazó Kibontás blokk is eltűnik, ha az adat üres.

## Gomb

A rejtett tartalmat nyitó és záró gomb a **Button** szakaszban állítható:

- **Alignment**: a gomb vízszintes helye.
- **Icon Position**: az ikon helye a szöveghez képest: **Start** (balra), **End** (jobbra), **Top** (fölé), **Bottom** (alá).
- **Fold / Unfold** fülek: külön ikon és szöveg az összecsukott és a kibontott állapothoz. Az ikon az ikonkönyvtárból választható, vagy feltölthető saját SVG. A gomb feliratai alapesetben **Megjelenítés** (kibontás) és **Elrejtés** (összecsukás).

## Stílus

A **Stílus** fülön minden elemhez (konténer, elválasztó, tartalom, gomb) vannak beállítások. Ha elkészültél, kattints a **Közzététel** gombra.

## Eredmény az oldalon

![Összecsukott Kibontás widget az oldalon, a Megjelenítés gombbal](./kepek/unfold-zart.webp)

*Összecsukott Kibontás widget az oldalon, a Megjelenítés gombbal* (https://minta-bolt.hu/jettricks-demo/)

Összecsukott állapotban a megadott magasságig látszik a szöveg. A gombra kattintva a tartalom kinyílik, és a gomb felirata **Elrejtés** lesz.