← Back

vaadin-accordion

The Web Component for expandable panels. Part of the Vaadin components.

Author

Contributors

Rating

<vaadin-accordion>

Name: vaadin-accordion
Availability: InStock
Rating: 3 (2 reviews)
Author: Vaadin

<vaadin-accordion> is a Web Component providing accordion functionality, part of the Vaadin components.

Example Usage

<vaadin-accordion>
  <vaadin-accordion-panel theme="filled">
    <div slot="summary">Accordion Panel 1</div>
    <div>Accordion is a set of expandable sections.</div>
  </vaadin-accordion-panel>
  <vaadin-accordion-panel theme="filled">
    <div slot="summary">Accordion Panel 2</div>
    <div>Only one accordion panel can be opened.</div>
  </vaadin-accordion-panel>
</vaadin-accordion>

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

@vaadin/element-base#^0.1.3
@vaadin/keyboard-direction-mixin#^0.1.2
@vaadin/slotted-items-mixin#^0.1.2
@vaadin/themable-element#^0.1.2
@vaadin/vaadin-lumo-styles#^1.5.0
@vaadin/vaadin-material-styles#^1.2.3
@vaadin/vaadin-themable-mixin#^1.5.2
@vaadin/vaadin-details#^2.0.0-alpha3
lit-element#^2.0.0
lit-html#^1.0.0
tslib#^1.10.0

Released: 2019-12-23
Maturity: IMPORTED
License: Apache License 2.0

Compatibility

Framework: Polymer 3.0+ in 1.0.1; Polymer 2.0+ in 1.0.1
Browser: Browser Independent

vaadin-accordion - Vaadin Add-on Directory

The Web Component for expandable panels. Part of the Vaadin components.

[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-accordion)](https://www.npmjs.com/package/@vaadin/vaadin-accordion) [![Bower version](https://badgen.net/github/release/vaadin/vaadin-accordion)](https://github.com/vaadin/vaadin-accordion/releases) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-accordion) [![Build Status](https://travis-ci.org/vaadin/vaadin-accordion.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-accordion) [![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-accordion/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-accordion?branch=master) [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Available in Vaadin_Directory](https://img.shields.io/vaadin-directory/v/vaadinvaadin-accordion.svg)](https://vaadin.com/directory/component/vaadinvaadin-accordion) [![Stars in Vaadin_Directory](https://img.shields.io/vaadin-directory/stars/vaadinvaadin-accordion.svg)](https://vaadin.com/directory/component/vaadinvaadin-accordion) # <vaadin-accordion> [<vaadin-accordion>](https://vaadin.com/components/vaadin-accordion) is a Web Component providing accordion functionality, part of the [Vaadin components](https://vaadin.com/components). [

](https://vaadin.com/components/vaadin-accordion) ## Example Usage ```html

Accordion Panel 1

Accordion is a set of expandable sections.

Accordion Panel 2

Only one accordion panel can be opened.

```

Directory