<!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <link rel="import" href="../polymer/polymer.html"> <!-- `iron-collapse` creates a collapsible block of content. By default, the content will be collapsed. Use `opened` or `toggle()` to show/hide the content. <button on-click="toggle">toggle collapse</button> <iron-collapse id="collapse"> <div>Content goes here...</div> </iron-collapse> ... toggle: function() { this.$.collapse.toggle(); } `iron-collapse` adjusts the height/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> <div class="collapse-content"> <div>Content goes here...</div> </div> </iron-collapse> @group Iron Elements @hero hero.svg @demo demo/index.html @element iron-collapse --> <dom-module id="iron-collapse"> <style> :host { display: block; transition-duration: 300ms; } :host(.iron-collapse-closed) { display: none; } :host(:not(.iron-collapse-opened)) { overflow: hidden; } </style> <template> <content></content> </template> </dom-module> <script> Polymer({ is: 'iron-collapse', properties: { /** * If true, the orientation is horizontal; otherwise is vertical. * * @attribute horizontal */ horizontal: { type: Boolean, value: false, observer: '_horizontalChanged' }, /** * Set opened to true to show the collapse element and to false to hide it. * * @attribute opened */ opened: { type: Boolean, value: false, notify: true, observer: '_openedChanged' } }, hostAttributes: { role: 'group', 'aria-expanded': 'false' }, listeners: { transitionend: '_transitionEnd' }, ready: function() { // Avoid transition at the beginning e.g. page loads and enable // transitions only after the element is rendered and ready. this._enableTransition = true; }, /** * Toggle the opened state. * * @method toggle */ toggle: function() { this.opened = !this.opened; }, show: function() { this.opened = true; }, hide: function() { this.opened = false; }, updateSize: function(size, animated) { this.enableTransition(animated); var s = this.style; var nochange = s[this.dimension] === size; s[this.dimension] = size; if (animated && nochange) { this._transitionEnd(); } }, enableTransition: function(enabled) { this.style.transitionDuration = (enabled && this._enableTransition) ? '' : '0s'; }, _horizontalChanged: function() { this.dimension = this.horizontal ? 'width' : 'height'; this.style.transitionProperty = this.dimension; }, _openedChanged: function() { if (this.opened) { this.setAttribute('aria-expanded', 'true'); this.setAttribute('aria-hidden', 'false'); this.toggleClass('iron-collapse-closed', false); this.updateSize('auto', false); var s = this._calcSize(); this.updateSize('0px', false); // force layout to ensure transition will go /** @suppress {suspiciousCode} */ this.offsetHeight; this.updateSize(s, true); // focus the current collapse this.focus(); } else { this.setAttribute('aria-expanded', 'false'); this.setAttribute('aria-hidden', 'true'); this.toggleClass('iron-collapse-opened', false); this.updateSize(this._calcSize(), false); // force layout to ensure transition will go /** @suppress {suspiciousCode} */ this.offsetHeight; this.updateSize('0px', true); } }, _transitionEnd: function() { if (this.opened) { this.updateSize('auto', false); } this.toggleClass('iron-collapse-closed', !this.opened); this.toggleClass('iron-collapse-opened', this.opened); this.enableTransition(false); }, _calcSize: function() { return this.getBoundingClientRect()[this.dimension] + 'px'; }, }); </script>