---
title: Haitarielementti ”Accordion”
description: "## Haitarin luominen Haitarielementin luomiseen valitse hakupalkista **Accordion-lohkoelementti**. ![Haitari 1](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2025/08/haitari-1.jpg) Avautuvasta valikosta voit valita haluamasi tyylin haitarille valmiista vaihtoehdoista tai valita **\"Skip\"**, jos haluat kustomoida haitarielementin alusta alkaen. Valmiisiin tyyleihin pystyy yhtälailla tehdä muutoksia. ![Haitari 2](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2025/08/haitari-2.jpg) Luotu haitari ilmestyy tyhjänä…"
url: "https://ohjeet.helpotkotisivut.fi/ohje/haitarielementti-accordion/"
updated: "2025-12-29"
category: Lohkoelementit
---

# Haitarielementti ”Accordion”

## Haitarin luominen

Haitarielementin luomiseen valitse hakupalkista **Accordion-lohkoelementti**.

![Haitari 1](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2025/08/haitari-1.jpg)

Avautuvasta valikosta voit valita haluamasi tyylin haitarille valmiista vaihtoehdoista tai valita **"Skip"**, jos haluat kustomoida haitarielementin alusta alkaen. Valmiisiin tyyleihin pystyy yhtälailla tehdä muutoksia.

![Haitari 2](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2025/08/haitari-2.jpg)

Luotu haitari ilmestyy tyhjänä ja elementissä on valmiiksi kaksi kohtaa. **Add Title -kohtaan** voit kirjoittaa otsikon ja **plusmerkkiä** painamalla valita haitarin sisälle menevän lohkoelementin. Oikealla olevista miinus- ja plus -merkeistä saat avattua/ suljettua haitarielementin, jolloin haitarielementin sisällä olevia elementtejä on helpompi muokata.

![Haitari 3](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2025/08/haitari-3.jpg)

## Haitarin ulkoasun muokkaaminen

Koko haitarielementti Accordion valittuna, ilmestyy sivupalkkiin sen eri muokkausvaihtoehdot.

![Haitari 4](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2025/08/haitari-4.jpg)

General -välilehdellä voit muokata paneelien avautumista.

**Panel close when another opens** -täppä aktiivisena haitarielementin paneelit ovat yksi kerrallaan auki. Tämä toiminto päällä, sivustovierailijan ei tarvitse itse sulkea avaamiaan paneeleja.

Alla oleva **Start with all panes collapsed** -täppä aktiivisena haitarin kaikki paneelit ovat aluksi suljettuina. Jos otat toiminnon pois päältä, voit avautuvasta **Initial Open Accordion** -kohdasta valita mikä paneeleista on valmiiksi auki sivulle tultaessa.

**Pane Title Trigger Icon** -kohdasta voit vaihtaa halutessasi haitarin ikonit.

![Haitari 5](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2025/08/haitari-5.jpg)

Style -välilehdellä pääset muokkaamaan haitarin värejä.

**Title Color** -kohdasta asetetaan paneelin otsikon väri ja **Title Background** -kohdasta paneelin taustalaatikon väri.

Jos haluat taustalaatikon läpinäkyväksi, voit asettaa värin A-arvoksi 0. Tällöin laatikon väri on täysin läpinäkyvä.

**Pane Title Border** -kohdasta voit taustalaatikon sijasta asettaa paneeleille ääriviivalaatikot.

**Huom!** Värit pitää erikseen asettaa Normal, Hover ja Active -kohtiin:

- Normal = värit normaalitilassa
- Hover = värit hoveritilassa, eli kun hiiren vie paneelin päälle
- Active = aktiivinen eli avattu paneeli

![Haitari 6](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2025/08/haitari-6.jpg)

Advanced -välilehdellä voi säätää paneelien kokoa.

**Pane Title Sizing** -kohdassa määritetään kuinka kaukana taustalaatikon reunasta otsikkoteksti on.

**Pane Space Betveen** -kohdassa voit säätää kuinka kaukana paneelilaatikot ovat toisistaan.

**Inner Content Padding** -kohdassa voit

![Haitari 7](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2025/08/haitari-7.jpg)

## Haitarin paneelien lisääminen ja poistaminen

Klikkaamalla rivin otsikkoa, valitset koko paneelirivin.

Ilmestyvästä muokkauspalkista (kolme pistettä) voit nyt helposti poistaa valitun rivin tai monistaa sen.

![Haitaririvi 1](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2025/08/haitaririvi-1.jpg)

Koko haitarielementti valittuna, ilmestyy sen alareunaan **+ Add Accordion Item** -painike, jota klikkaamalla saat helposti lisättyä uuden tyhjän paneelirivin.

![Haitaririvi 2](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2025/08/haitaririvi-2.jpg)