AngularJS Material UI is not providing any Accordion functionality script. So here I made some accordion with UI elements provided in Material UI.

Accordion

Accordion is consists of headers and content. Observe above image. HOLDEN, FORD, TOYOTA are headers here. Whenever user clicks on plus icon, the content will be displayed and plus icon will be minus. Observe below JSON of header and body data.
JSON data
$scope.accordianData = [
        {
            "heading" : "HOLDEN",
            "content" : "GM Holden Ltd, commonly known as Holden, is an Australian automaker that operates in Australasia and is headquartered in Port Melbourne, Victoria. The company was founded in 1856 as a saddlery manufacturer in South Australia."
        },
        {
            "heading" : "FORD",
            "content" : "The Ford Motor Company (commonly referred to as simply Ford) is an American multinational automaker headquartered in Dearborn, Michigan, a suburb of Detroit. It was founded by Henry Ford and incorporated on June 16, 1903."
        },
        {
            "heading" : "TOYOTA",
            "content" : "Toyota Motor Corporation is a Japanese automotive manufacturer which was founded by Kiichiro Toyoda in 1937 as a spinoff from his father's company Toyota Industries, which is currently headquartered in Toyota, Aichi Prefecture, Japan."
        }
    ];

Markup

Here data.expanded variable which makes Accordion collapse and expand. Whenever user clicks on it, this variable will be toggled
<div class="md-accordion" ng-repeat="data in accordianData">
    <md-toolbar ng-init="data.expanded = false" ng-click="data.expanded = !data.expanded">
        <div class="md-toolbar-tools">
            <h2>
                <span>{{data.heading}}</span>
            </h2>
            <span flex=""></span>
            <span ng-class="{expandCollapse:true, active:data.expanded}"></span> 
        </div>
    </md-toolbar>
    <div ng-class="{dataContent:true, activeContent:data.expanded}">{{data.content}}</div>
<div>
The above demo will collapse and expand only that particular div. What we have to do, collapse all other div, when user clicks on item ?. Here is the solution

Markup

When use clicks on particular item here it will collapse all expand that item
<div class="md-accordion" ng-repeat="data in accordianData">
    <md-toolbar ng-init="data.expanded = false" ng-click="collapseAll(data)">
        <div class="md-toolbar-tools">
            <h2>
                <span>{{data.heading}}</span>
            </h2>
            <span flex=""></span>
            <span ng-class="{expandCollapse:true, active:data.expanded}"></span> 
        </div>
    </md-toolbar>
    <div ng-class="{dataContent:true, activeContent:data.expanded}">{{data.content}}</div>
<div>
Function
$scope.collapseAll = function(data) {
   for(var i in $scope.accordianData) {
       if($scope.accordianData[i] != data) {
           $scope.accordianData[i].expanded = false;   
       }
   }
   data.expanded = !data.expanded;
};

6 comments:

  1. Hi..Thanks for this post!...Could you let me know how to close the accordian when user clicks outside of it?

    ReplyDelete
    Replies
    1. U need to find out when user clicks outside of accordian... follow this link
      http://stackoverflow.com/questions/17706847/not-sure-how-to-hide-a-div-when-clicking-outside-of-the-div

      Delete
  2. how to change the icon through html itself... I need arrow icon instead of Plus sign

    ReplyDelete
    Replies
    1. .....span ng-class="{expandCollapse:true, active:data.expanded}".... this element represents icon. Place your own icon in this element place

      Delete
  3. I want to call certain method on click of header and want to show arrow icons which are basically md-icons how shd I proceed?

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts