diff --git a/e2e/components/expansion-e2e.spec.ts b/e2e/components/expansion-e2e.spec.ts
new file mode 100644
index 00000000000..944c4e46653
--- /dev/null
+++ b/e2e/components/expansion-e2e.spec.ts
@@ -0,0 +1,25 @@
+import {browser, by, element} from 'protractor';
+import {screenshot} from '../screenshot';
+
+describe('expansion', () => {
+
+ beforeEach(() => browser.get('/expansion'));
+
+ it('should show a expansion panel', async () => {
+ expect(element(by.css('.mat-expansion-panel'))).toBeDefined();
+
+ screenshot();
+ });
+
+ it('should hide contents of the expansion panel on click', async () => {
+ const panelHeader = element(by.css('.mat-expansion-panel-header'));
+ const panelContent = element(by.css('.mat-expansion-panel-content'));
+
+ expect(panelContent.isDisplayed()).toBe(false);
+
+ panelHeader.click();
+
+ expect(panelContent.isDisplayed()).toBe(true);
+ });
+
+});
diff --git a/src/e2e-app/e2e-app/e2e-app.html b/src/e2e-app/e2e-app/e2e-app.html
index ce04dbf80ba..c6f46682937 100644
--- a/src/e2e-app/e2e-app/e2e-app.html
+++ b/src/e2e-app/e2e-app/e2e-app.html
@@ -5,6 +5,7 @@
Button
Checkbox
Dialog
+ Expansion
Fullscreen
Grid list
Icon
diff --git a/src/e2e-app/e2e-app/routes.ts b/src/e2e-app/e2e-app/routes.ts
index 078a57761dd..c5cad76ebf0 100644
--- a/src/e2e-app/e2e-app/routes.ts
+++ b/src/e2e-app/e2e-app/routes.ts
@@ -20,6 +20,7 @@ import {
ListOverviewExample,
ToolbarMultirowExample,
ButtonToggleOverviewExample,
+ ExpansionOverviewExample
} from '@angular/material-examples';
export const E2E_APP_ROUTES: Routes = [
@@ -29,6 +30,7 @@ export const E2E_APP_ROUTES: Routes = [
{path: 'button-toggle', component: ButtonToggleOverviewExample},
{path: 'checkbox', component: SimpleCheckboxes},
{path: 'dialog', component: DialogE2E},
+ {path: 'expansion', component: ExpansionOverviewExample},
{path: 'fullscreen', component: FullscreenE2E},
{path: 'grid-list', component: GridListE2E},
{path: 'icon', component: IconE2E},
diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts
index 740dd140223..8d417f5a9ca 100644
--- a/src/material-examples/example-module.ts
+++ b/src/material-examples/example-module.ts
@@ -38,6 +38,8 @@ import {DialogContentExampleDialog,DialogContentExample} from './dialog-content/
import {DialogDataExampleDialog,DialogDataExample} from './dialog-data/dialog-data-example';
import {DialogElementsExampleDialog,DialogElementsExample} from './dialog-elements/dialog-elements-example';
import {DialogOverviewExampleDialog,DialogOverviewExample} from './dialog-overview/dialog-overview-example';
+import {ExpansionOverviewExample} from './expansion-overview/expansion-overview-example';
+import {ExpansionStepsExample} from './expansion-steps/expansion-steps-example';
import {GridListDynamicExample} from './grid-list-dynamic/grid-list-dynamic-example';
import {GridListOverviewExample} from './grid-list-overview/grid-list-overview-example';
import {IconOverviewExample} from './icon-overview/icon-overview-example';
@@ -236,6 +238,18 @@ export const EXAMPLE_COMPONENTS = {
additionalFiles: ["dialog-overview-example-dialog.html"],
selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog'
},
+ 'expansion-overview': {
+ title: 'Basic expansion panel',
+ component: ExpansionOverviewExample,
+ additionalFiles: null,
+ selectorName: null
+ },
+ 'expansion-steps': {
+ title: 'Expansion panel as accordion',
+ component: ExpansionStepsExample,
+ additionalFiles: null,
+ selectorName: null
+ },
'grid-list-dynamic': {
title: 'Dynamic grid-list',
component: GridListDynamicExample,
@@ -540,6 +554,8 @@ export const EXAMPLE_LIST = [
DialogDataExampleDialog,DialogDataExample,
DialogElementsExampleDialog,DialogElementsExample,
DialogOverviewExampleDialog,DialogOverviewExample,
+ ExpansionOverviewExample,
+ ExpansionStepsExample,
GridListDynamicExample,
GridListOverviewExample,
IconOverviewExample,
diff --git a/src/material-examples/expansion-overview/expansion-overview-example.ts b/src/material-examples/expansion-overview/expansion-overview-example.ts
index e47663d02d8..75cff7cc4ca 100644
--- a/src/material-examples/expansion-overview/expansion-overview-example.ts
+++ b/src/material-examples/expansion-overview/expansion-overview-example.ts
@@ -1,6 +1,8 @@
import {Component} from '@angular/core';
-
+/**
+ * @title Basic expansion panel
+ */
@Component({
selector: 'expansion-overview-example',
templateUrl: 'expansion-overview-example.html',
diff --git a/src/material-examples/expansion-steps/expansion-steps-example.ts b/src/material-examples/expansion-steps/expansion-steps-example.ts
index 4790865e781..e302175fa2a 100644
--- a/src/material-examples/expansion-steps/expansion-steps-example.ts
+++ b/src/material-examples/expansion-steps/expansion-steps-example.ts
@@ -1,6 +1,8 @@
import {Component} from '@angular/core';
-
+/**
+ * @title Expansion panel as accordion
+ */
@Component({
selector: 'expansion-steps-example',
templateUrl: 'expansion-steps-example.html',
diff --git a/src/material-examples/material-module.ts b/src/material-examples/material-module.ts
index c4f234d336c..1b7bca44a48 100644
--- a/src/material-examples/material-module.ts
+++ b/src/material-examples/material-module.ts
@@ -8,7 +8,7 @@ import {
MdListModule, MdMenuModule, MdProgressBarModule, MdProgressSpinnerModule,
MdRadioModule, MdSelectModule, MdSidenavModule, MdSliderModule, MdSortModule,
MdSlideToggleModule, MdSnackBarModule, MdTableModule, MdTabsModule, MdToolbarModule,
- MdTooltipModule, MdFormFieldModule
+ MdTooltipModule, MdFormFieldModule, MdExpansionModule
} from '@angular/material';
@NgModule({
@@ -22,6 +22,7 @@ import {
MdChipsModule,
MdDatepickerModule,
MdDialogModule,
+ MdExpansionModule,
MdFormFieldModule,
MdGridListModule,
MdIconModule,
diff --git a/src/material-examples/public_api.ts b/src/material-examples/public_api.ts
index 0c924467874..44e209b7b5a 100644
--- a/src/material-examples/public_api.ts
+++ b/src/material-examples/public_api.ts
@@ -6,3 +6,4 @@ export * from './datepicker-overview/datepicker-overview-example';
export * from './card-fancy/card-fancy-example';
export * from './toolbar-multirow/toolbar-multirow-example';
export * from './button-toggle-overview/button-toggle-overview-example';
+export * from './expansion-overview/expansion-overview-example';