PolymerElements/iron-collapse

Name: iron-collapse

Owner: PolymerElements

Description: Adds collapsible behavior to a target element

Created: 2015-04-16 18:50:24.0

Updated: 2018-04-26 19:04:31.0

Pushed: 2018-05-23 02:27:31.0

Homepage: https://www.webcomponents.org/element/PolymerElements/iron-collapse

Size: 177

Language: HTML

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Demo and API docs

<iron-collapse>

iron-collapse creates a collapsible block of content. By default, the content will be collapsed. Use opened or toggle() to show/hide the content. The aria-expanded attribute should only be set on the button that controls the collapsable area, not on the area itself. See https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element#Description

ton id="button" on-click="toggle">toggle collapse</button>

n-collapse id="collapse">
iv>Content goes here...</div>
on-collapse>



le: function() {
is.$.collapse.toggle();
is.$.button.setAttribute('aria-expanded', this.$.collapse.opened);

iron-collapse adjusts the max-height/max-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.

le>
ollapse-content {
padding: 15px;
border: 1px solid #dedede;

yle>

n-collapse>
iv class="collapse-content">
<div>Content goes here...</div>
div>
on-collapse>

Styling

The following custom properties and mixins are available for styling:

| Custom property | Description | Default | | — | — | — | | --iron-collapse-transition-duration | Animation transition duration | 300ms |