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>
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>
$scope.collapseAll = function(data) { for(var i in $scope.accordianData) { if($scope.accordianData[i] != data) { $scope.accordianData[i].expanded = false; } } data.expanded = !data.expanded; };
Nice post. Thanks for sharing.
ReplyDeleteNon woven fabric bags making machine
Hi..Thanks for this post!...Could you let me know how to close the accordian when user clicks outside of it?
ReplyDeleteU need to find out when user clicks outside of accordian... follow this link
Deletehttp://stackoverflow.com/questions/17706847/not-sure-how-to-hide-a-div-when-clicking-outside-of-the-div
how to change the icon through html itself... I need arrow icon instead of Plus sign
ReplyDelete.....span ng-class="{expandCollapse:true, active:data.expanded}".... this element represents icon. Place your own icon in this element place
DeleteI want to call certain method on click of header and want to show arrow icons which are basically md-icons how shd I proceed?
ReplyDeleteHow can i add html tags in content part?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHowever, 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.
ReplyDeleteHere 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.
ReplyDeletenice example . thank you very much
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDelete