<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/fagnersilvamartins/angular-material-collapsible/8426264b/dist/css/collapsible.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="appDemo">
<md-content>
<h1>Collapsible Popout</h1>
<md-collapsible class="md-popout">
<md-collapsible-item>
<md-collapsible-header layout="row">
This is the header of the first item
<span flex></span>
<md-button class="md-icon-button" aria-label="favorite">
<md-icon md-svg-icon="img/icons/ic_email_24px.svg"></md-icon>
</md-button>
</md-collapsible-header>
<md-collapsible-body>
This is the body of the first item
</md-collapsible-body>
</md-collapsible-item>
<md-collapsible-item>
<md-collapsible-header layout="row">
This is the header of the secund item
<span flex></span>
<md-button class="md-icon-button" aria-label="favorite">
<md-icon md-svg-icon="img/icons/ic_email_24px.svg"></md-icon>
</md-button>
</md-collapsible-header>
<md-collapsible-body>
This is the body of the secund item
</md-collapsible-body>
</md-collapsible-item>
</md-collapsible>
<h1>Collapsible Accordion</h1>
<md-collapsible class="md-accordion">
<md-collapsible-item>
<md-collapsible-header layout="row">
This is the header of the first item
</md-collapsible-header>
<md-collapsible-body>
This is the body of the first item
</md-collapsible-body>
</md-collapsible-item>
<md-collapsible-item>
<md-collapsible-header layout="row">
This is the header of the secund item
</md-collapsible-header>
<md-collapsible-body>
This is the body of the secund item
</md-collapsible-body>
</md-collapsible-item>
</md-collapsible>
<h1>Collapsible first item default open</h1>
<md-collapsible class="md-popout">
<md-collapsible-item md-open="true">
<md-collapsible-header>
</md-collapsible-header>
<md-collapsible-body></md-collapsible-body>
</md-collapsible-item>
<md-collapsible-item>
<md-collapsible-header></md-collapsible-header>
<md-collapsible-body>
<div>Body</div>
</md-collapsible-body>
</md-collapsible-item>
</md-collapsible>
<h1>Collapsible multiple items opened</h1>
<md-collapsible class="md-popout multiple-open">
<md-collapsible-item>
<md-collapsible-header></md-collapsible-header>
<md-collapsible-body></md-collapsible-body>
</md-collapsible-item>
<md-collapsible-item>
<md-collapsible-header></md-collapsible-header>
<md-collapsible-body>
<div>Body</div>
</md-collapsible-body>
</md-collapsible-item>
</md-collapsible>
</md-content>
<!-- JS Dependancies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.rawgit.com/fagnersilvamartins/angular-material-collapsible/8426264b/dist/js/collapsible.min.js"></script>
<script src="https://cdn.rawgit.com/fagnersilvamartins/angular-material-collapsible/8426264b/dist/js/collapsibleDirective.min.js"></script>
<script src="script.js"></script>
</body>
</html>
angular.module('appDemo', ['ngMaterial', 'material.svgAssetsCache', 'ngMaterialCollapsible']);
/* Styles go here */
md-content {
padding: 15px;
}