---
title: Accordion
sidebar: true
---

# Accordion

Accordion component

## Usage

<hy-accordion-container>
  <hy-accordion-item accordiontitle="This is a accordion item 1">
  <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
  <hy-accordion-item accordiontitle="This is a accordion item 2">
  <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
  <hy-accordion-item accordiontitle="This is a accordion item 3">
  <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
</hy-accordion-container>

```html
<hy-accordion-container>
  <hy-accordion-item accordiontitle="This is a accordion item 1">
    <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
  <hy-accordion-item accordiontitle="This is a accordion item 2">
    <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
  <hy-accordion-item accordiontitle="This is a accordion item 3">
    <hy-paragraph-text>Accordion content</hy-paragraph-text>
  </hy-accordion-item>
</hy-accordion-container>
```


<!-- Auto Generated Below -->


## Properties

| Property         | Attribute        | Description | Type     | Default     |
| ---------------- | ---------------- | ----------- | -------- | ----------- |
| `accordiontitle` | `accordiontitle` |             | `string` | `undefined` |


## Dependencies

### Depends on

- [hy-icon](../icon)

### Graph
```mermaid
graph TD;
  hy-accordion-item --> hy-icon
  style hy-accordion-item fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Helsinki University Design System