iron-collapse creates a collapsible block of content. By default, the content
will be collapsed. Use opened or toggle() to show/hide the content. The
aria-expanded attribute should only be set on the button that controls the
collapsable area, not on the area itself. See
https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element#Description
iron-collapse adjusts the max-height/max-width of the collapsible element to show/hide
the content. So avoid putting padding/margin/border on the collapsible directly,
and instead put a div inside and style that.
<style>
.collapse-content {
padding:15px;
border:1px solid #dedede;
}
</style><iron-collapse><divclass="collapse-content"><div>Content goes here...</div></div></iron-collapse>The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
|---|---|---|
--iron-collapse-transition-duration | Animation transition duration | 300ms |
See: Documentation, Demo.
npm install --save @polymer/iron-collapse
<html><head><scripttype="module">import'@polymer/iron-collapse/iron-collapse.js';</script></head><body><iron-collapseid="collapse"><div>Content goes here...</div></iron-collapse></body></html>import{PolymerElement,html}from'@polymer/polymer';import'@polymer/iron-collapse/iron-collapse.js';classSampleElementextendsPolymerElement{staticgettemplate(){returnhtml`<iron-collapseid="collapse"><div>Content goes here...</div></iron-collapse> `;}}customElements.define('sample-element',SampleElement);If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
git clone https://github.com/PolymerElements/iron-collapse
cd iron-collapse
npm install
npm install -g polymer-clipolymer serve --npm
open http://127.0.0.1:<port>/demo/polymer test --npm