Vheissu/app.html

## app.html
<template>
  <require from="./collapse"></require>

<style>
div {
  border: 1px solid #CCC;
}

.au-collapse--show {
    display: block;
}

.au-collapse--collapse {
    display: none;
}

.au-collapse--collapsing {
    height: 0;
    overflow: hidden;
    position: relative;
    transition: height .35s ease;
}
</style>

<a click.delegate="toggleCollapse()">Toggle me</a>

  <div collapse="collapsed.bind: collapsed;"><h1>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</h1></div>
</template>

## app.js
export class App {
  constructor() {
    this.collapsed = false;
  }

  toggleCollapse() {
    this.collapsed = !this.collapsed;
  }
}

## collapse.js
import {bindable, customAttribute, inject} from "aurelia-framework";

const ClassName = {
    SHOW: "au-collapse--show",
    COLLAPSE: "au-collapse--collapse",
    COLLAPSING: "au-collapse--collapsing"
}

@customAttribute("collapse")
@inject(Element)
export class Collapse {
    @bindable collapsed = false;

    constructor(element) {
        this.element = element;

        this.showComplete = () => {
            this.element.classList.remove(ClassName.COLLAPSING);
            this.element.classList.remove(ClassName.COLLAPSE);
            this.element.classList.add(ClassName.SHOW);

            this.element.style.height = "";

            console.log("Complete");
        };

        this.hideComplete = () => {
            this.element.classList.remove(ClassName.COLLAPSING);
            this.element.classList.add(ClassName.COLLAPSE);

            console.log("Hide");
        };
    }

    attached() {
        this.element.style.height = "auto";

        this.height = this.element.clientHeight;
        this.element.classList.add("au-collapse");

        this.element.classList.remove(ClassName.SHOW);

        if (this.collapsed) {
          this.hide();
          this.hideComplete();
        } else {
          this.show();
          this.showComplete();
        }
    }

    show() {
        this.element.classList.remove(ClassName.COLLAPSE);
        this.element.classList.add(ClassName.COLLAPSING);

        this.element.style.height = 0;

        this.element.setAttribute("aria-expanded", true);

        this.element.removeEventListener("transitionend", this.hideComplete);
        this.element.removeEventListener("transitionend", this.showComplete);
        this.element.addEventListener("transitionend", this.showComplete);

        window.requestAnimationFrame(() => {
          this.element.style.height = `${this.height}px`;
        }, 0);
    }

    hide() {
        this.element.classList.add(ClassName.COLLAPSING);

        this.element.classList.remove(ClassName.COLLAPSE);
        this.element.classList.remove(ClassName.SHOW);

        this.element.style.height = `${this.height}px`;

        this.element.setAttribute("aria-expanded", false);

        this.element.removeEventListener("transitionend", this.showComplete);
        this.element.removeEventListener("transitionend", this.hideComplete);

        this.element.addEventListener("transitionend", this.hideComplete);

        window.requestAnimationFrame(() => {
            this.element.style.height = 0;
        });
    }

    collapsedChanged(collapsed: boolean) {
        if (collapsed) {
            this.hide();
        } else {
            this.show();
        }
    }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>
	<template>
	<require from="./collapse"></require>

	<style>
	div {
	border: 1px solid #CCC;
	}

	.au-collapse--show {
	display: block;
	}

	.au-collapse--collapse {
	display: none;
	}

	.au-collapse--collapsing {
	height: 0;
	overflow: hidden;
	position: relative;
	transition: height .35s ease;
	}
	</style>

	<a click.delegate="toggleCollapse()">Toggle me</a>

	<div collapse="collapsed.bind: collapsed;"><h1>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</h1></div>
	</template>
	export class App {
	constructor() {
	this.collapsed = false;
	}

	toggleCollapse() {
	this.collapsed = !this.collapsed;
	}
	}
	import {bindable, customAttribute, inject} from "aurelia-framework";

	const ClassName = {
	SHOW: "au-collapse--show",
	COLLAPSE: "au-collapse--collapse",
	COLLAPSING: "au-collapse--collapsing"
	}

	@customAttribute("collapse")
	@inject(Element)
	export class Collapse {
	@bindable collapsed = false;

	constructor(element) {
	this.element = element;

	this.showComplete = () => {
	this.element.classList.remove(ClassName.COLLAPSING);
	this.element.classList.remove(ClassName.COLLAPSE);
	this.element.classList.add(ClassName.SHOW);

	this.element.style.height = "";

	console.log("Complete");
	};

	this.hideComplete = () => {
	this.element.classList.remove(ClassName.COLLAPSING);
	this.element.classList.add(ClassName.COLLAPSE);

	console.log("Hide");
	};
	}

	attached() {
	this.element.style.height = "auto";

	this.height = this.element.clientHeight;
	this.element.classList.add("au-collapse");

	this.element.classList.remove(ClassName.SHOW);

	if (this.collapsed) {
	this.hide();
	this.hideComplete();
	} else {
	this.show();
	this.showComplete();
	}
	}

	show() {
	this.element.classList.remove(ClassName.COLLAPSE);
	this.element.classList.add(ClassName.COLLAPSING);

	this.element.style.height = 0;

	this.element.setAttribute("aria-expanded", true);

	this.element.removeEventListener("transitionend", this.hideComplete);
	this.element.removeEventListener("transitionend", this.showComplete);
	this.element.addEventListener("transitionend", this.showComplete);

	window.requestAnimationFrame(() => {
	this.element.style.height = `${this.height}px`;
	}, 0);
	}

	hide() {
	this.element.classList.add(ClassName.COLLAPSING);

	this.element.classList.remove(ClassName.COLLAPSE);
	this.element.classList.remove(ClassName.SHOW);

	this.element.style.height = `${this.height}px`;

	this.element.setAttribute("aria-expanded", false);

	this.element.removeEventListener("transitionend", this.showComplete);
	this.element.removeEventListener("transitionend", this.hideComplete);

	this.element.addEventListener("transitionend", this.hideComplete);

	window.requestAnimationFrame(() => {
	this.element.style.height = 0;
	});
	}

	collapsedChanged(collapsed: boolean) {
	if (collapsed) {
	this.hide();
	} else {
	this.show();
	}
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>