readme.md

---
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

### Used by

- [hy-footer-info](../footer/hy-footer-info)

### Depends on

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

### Graph

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

---

Helsinki University Design System