third_party/polymer/v1_0/components-chromium/iron-collapse/README.md

   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 ```