1
2<!---
3
4This README is automatically generated from the comments in these files:
5iron-collapse.html
6
7Edit those files, and our readme bot will duplicate them over here!
8Edit this file, and the bot will squash your changes :)
9
10The bot does some handling of markdown. Please file a bug if it does the wrong
11thing! https://github.com/PolymerLabs/tedium/issues
12
13-->
14
15[![Build status](https://travis-ci.org/PolymerElements/iron-collapse.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-collapse)
16
17_[Demo and API docs](https://elements.polymer-project.org/elements/iron-collapse)_
18
19
20##&lt;iron-collapse&gt;
21
22`iron-collapse` creates a collapsible block of content.  By default, the content
23will be collapsed.  Use `opened` or `toggle()` to show/hide the content.
24
25```html
26<button on-click="toggle">toggle collapse</button>
27
28<iron-collapse id="collapse">
29  <div>Content goes here...</div>
30</iron-collapse>
31
32...
33
34toggle: function() {
35  this.$.collapse.toggle();
36}
37```
38
39`iron-collapse` adjusts the max-height/max-width of the collapsible element to show/hide
40the content.  So avoid putting padding/margin/border on the collapsible directly,
41and instead put a div inside and style that.
42
43```html
44<style>
45  .collapse-content {
46    padding: 15px;
47    border: 1px solid #dedede;
48  }
49</style>
50
51<iron-collapse>
52  <div class="collapse-content">
53    <div>Content goes here...</div>
54  </div>
55</iron-collapse>
56```
57
58### Styling
59
60The following custom properties and mixins are available for styling:
61
62| Custom property | Description | Default |
63| --- | --- | --- |
64| `--iron-collapse-transition-duration` | Animation transition duration | `300ms` |
65
66
67