# Mobilbarát szűrők: a szűrők elrejtése gombbal

> A szűrőket tartalmazó oszlop vagy konténer elrejtése mobilon a Jet Offcanvas Column kiegészítővel, kinyitó és bezáró gombbal.

A Jet Offcanvas Column kiegészítővel a szűrők (vagy bármilyen más, oszlopban vagy konténerben lévő tartalom) mobilon elrejthetők, és egy gombra kattintva nyílnak ki. Követelmények: Elementor, JetSmartFilters a megjelenítendő tartalmat tartalmazó oszloppal, a kiegészítő telepítve és aktiválva.

## Az oszlop beállítása

1. Nyisd meg azt az oldalt vagy sablont, amelyen a szűrők mobilon rejtve legyenek, és kattints az oszlop vagy konténer ikonjára.
2. A **Advanced** fülön nyisd ki az **Offcanvas Settings** részt, és kapcsold be az **Enable** kapcsolót.
3. A **Expand Label** és a **Collapse Label** mezőben add meg a gombok szövegét.
4. Az **Expand Background Color** és az **Expand Text Color** mezővel állítsd a színeket, a **Typography** beállítás a betűtípust adja.
5. Az **Expand Padding**, **Expand Margin**, **Border Type** és **Expand Border Radius** mezőkkel a gomb helyét és kerete szabható. Az **Expand Button Icon** a gomb ikonja (a példában a „filter” ikon), az **Icon Size** az ikon mérete.
6. A „Collapse” gombhoz ugyanezek a beállítások tartoznak: **Collapse Background Color**, **Collapse Text Color**, **Typography**, **Collapse Padding**, **Collapse Margin**, **Border Type**, **Collapse Border Radius** és **Collapse Button Icon** (például nyíl ikon).
7. Kattints a **Publish/Update** gombra.

## Az eredmény

Asztali nézetben a szűrők a megszokott módon jelennek meg. Telefonon vagy a böngésző fejlesztői eszközeinek reszponzív módjában a szűrők helyett a kinyitó gomb látszik (a példában „Filters”). Rákattintva kinyílik a konténer, és a bezáró gombbal (a példában „Back”) visszazárható.

## Bármely elem bezáró gombbá tehető

Bármelyik elem bezárhatja a kinyílt konténert. Például az **Apply** gomb is:

1. Keresd meg vagy vedd fel az elrejtendő oszlopban az elemet.
2. A **Advanced** fülön a **CSS Classes** mezőbe írd: `offcanvas-collapse`.
3. Kattints a **Publish/Update** gombra.

Az osztály akkor működik, ha a látogató közvetlenül az osztállyal ellátott elemre, vagy az abban lévő gombra kattint. A látogató így a szűrők kiválasztása után az **Apply** gombbal egyszerre alkalmazza a szűrőt és bezárja az ablakot.