w3c-disclosure.html

<link rel="import" href="components/polymer/polymer.html">

<polymer-element name="w3c-disclosure" extends="button" attributes="controlfor expanded" on-click="{{buttonClick}}">
	<template>
		<style type="text/css">
			:host #icon:before {
				content:"►"; font-size: 1em;
			}
			:host #icon.expanded:before {
				content:"▼"; font-size: 1em;
			}
		</style>
		<span id="icon" aria-hidden="true" class="expanded"></span>
		<content></content>
	</template>
	<script>
		Polymer('w3c-disclosure', {
			ready: function() {
				this.setAttribute('type', 'button');
				if (this.expanded === null) this.expanded = false;
				else this.expanded = true;
				if (this.controlfor) {
					this.setAttribute('aria-controls', this.controlfor);
					this.target = document.querySelector('#' + this.controlfor);
					if (!this.target) {
						console.log("Target not found '" + this.controlfor + "'");
					}
				} else {
					console.log("controlfor attribute not set");
				}
			},
			buttonClick: function(event, detail, sender) {
				this.expanded = !this.expanded;
			},
			expandedChanged: function(oldValue, newValue) {
				if (this.target) {
					this.setAttribute('aria-expanded', newValue);
					//this.target.hidden = !newValue;
					if (newValue) {
						this.$.icon.classList.add('expanded');
						this.target.style.display='block';
					} else {
						this.$.icon.classList.remove('expanded');
						this.target.style.display='none';
					}					
				} else {
					console.log("Target not found");
				}
			},
		});
	</script>
</polymer-element>