Hi All,

We Often need tabbing & Accordion functionality in our project and what if we need it via angular material. Her is a quick guide of doing it simply and accurately.

Angular Material CSS references

<!-- Angular Material CSS now available via Google CDN; version 0.11.2 used here -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular&#95;material/1.0.0-rc1/angular-material.min.css">
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Angular Material JS references

<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular&#95;material/1.0.0-rc1/angular-material.min.js"></script>

Tabbing Sample

<md-tabs md-dynamic-height md-border-bottom>
    <md-tab label="Tab1">
        <md-tab-label>Tab1</md-tab-label>
        <md-tab-body>
            // Content for Tab1
        </md-tab-body>
    </md-tab>
    <md-tab label="Tab2">
        <md-tab-label>Tab2</md-tab-label>
        <md-tab-body>
            // Content for Tab2
        </md-tab-body>
    </md-tab>
    <md-tab label="Tab3">
        <md-tab-label>Tab3</md-tab-label>
        <md-tab-body>
            // Content for Tab3
        </md-tab-body>
    </md-tab>
</md-tabs>

Accordion Sample

<div id="accordion">
    <md-button class="md-raised md-primary">
        Accordion Title
        <md-icon aria-label="details"
                 class="material-icons step">
            details
        </md-icon>
    </md-button>
    <div ng-accordion-body>
        <div ng-cloak>
            <md-content>
                // Content for accordion
            </md-content>
        </div>
    </div>
</div>

Happy Coding....