| OLD | NEW |
| (Empty) |
| 1 # iron-collapse | |
| 2 | |
| 3 `iron-collapse` creates a collapsible block of content. By default, the content | |
| 4 will be collapsed. Use `opened` or `toggle()` to show/hide the content. | |
| 5 | |
| 6 ```html | |
| 7 <button on-click="{{toggle}}">toggle collapse</button> | |
| 8 | |
| 9 <iron-collapse id="collapse"> | |
| 10 <div>Content goes here...</div> | |
| 11 </iron-collapse> | |
| 12 ``` | |
| 13 | |
| 14 ```javascript | |
| 15 toggle: function() { | |
| 16 this.$.collapse.toggle(); | |
| 17 } | |
| 18 ``` | |
| 19 | |
| 20 `iron-collapse` adjusts the height/width of the collapsible element to show/hide | |
| 21 the content. So avoid putting padding/margin/border on the collapsible directly
, | |
| 22 and instead put a div inside and style that. | |
| 23 | |
| 24 ```html | |
| 25 <style> | |
| 26 .collapse-content { | |
| 27 padding: 15px; | |
| 28 border: 1px solid #dedede; | |
| 29 } | |
| 30 </style> | |
| 31 | |
| 32 <iron-collapse> | |
| 33 <div class="collapse-content"> | |
| 34 <div>Content goes here...</div> | |
| 35 </div> | |
| 36 </iron-collapse> | |
| 37 ``` | |
| OLD | NEW |