# Accordion

The `Accordion` control provides a way to toggle between hiding and showing large amounts of content.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Design-Time Customization

Each `AccordionPanel` can be fully customized at design-time.

![Accordion control showing customizable panels in design view](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-b700a9f8ebc4514600efc96cb8005c223d1b9315%2Fimage.png?alt=media)

## Advanced

### JavaScript Widget

| Item                                       | Description                                                                                                                                         |
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| Class name                                 | "wisej.web.Accordion", "wisej.web.accordion.Panel" for each individual panel.                                                                       |
| Theme appearance                           | "accordion", inherits from "panel", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                                     |
| Child components                           | "panel" is the container. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model).                                           |
| wisej.web.accordion.Panel child components | "icon" is the panel icon, if applicable. "captionbar" is the panel header. "title" is the captionbar text. "open-button" opens or closes the panel. |
| Source code                                | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                 |