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;
};

13 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
  4. How can i add html tags in content part?

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. However, if you do not have time or knowledge to write your assignment, you can order it from an masterpapers.com academic writing service. If you need help with assignment writing, do not hesitate to use this service online. You are guaranteed to get value for your money.

    ReplyDelete
  7. Here data.expanded variable which makes Accordion collapse and expand. Whenever user clicks on it, this variable will be toggled! Not every student will require help with their actual writing. However, for important papers, it is often best to have your work edited carefully before you submit to ensure that your work will be worthy of the best grades.

    ReplyDelete
  8. nice example . thank you very much

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete

Blogroll

Popular Posts