OLD | NEW |
1 # iron-collapse | 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 |