Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does one create an accordion dropdown menu in Angular Material?

If you go to the https://material.angularjs.org website, you will notice a very nice Accordion dropdown menu in the sidenav.

I'm trying to find a simplified version of this feature. I've looked into many examples it appears many of them are no longer working.

I don't need it complicated. So no need of repetative items. I can do all that. I need the basic functionality.

From what I've researched they have an expando feature being developed, but until then is there a work around?

Updated:

I wasn't able to find a good angular material design, but I was able to find an angular method.

https://github.com/sherwaniusman/angular-accordion

like image 573
Demodave Avatar asked Aug 17 '15 20:08

Demodave


People also ask

How is angular material accordion used?

To use the Angular material accordion, we need to import MatExpansionModule into our custom module. It is up to you to add all material modules in a separate custom module or root module app. We are adding all material modules in a custom module, it containing only the material module.

What is accordion angular?

What is Angular Accordion? The Angular Accordion is a GUI component for building vertical expandable panels with clickable headers and associated content sections, displayed in a single container. The accordion is commonly used to reduce the need of scrolling across multiple sections of content on a single page.


1 Answers

The following fiddle really helped me: Accordion example

I have also added functionality which allows expanding only 1 menu at a time, if others opened, it will automatically close them.

Code in Controller:

function controller($scope) {


     $scope.accordianData = [  
                                { "heading" : "About Us",         "content" : "" },
                                { "heading" : "Terms of Use",     "content" : "" },
                                { "heading" : "Privacy Policy",   "content" : "" },
                                { "heading" : "Help",             "content" : "" },
                             ];
      );
      // To expand or collapse the current view
      //This functionality automatically closes the other expanded lists
      $scope.toggleView = function(ary, data, index){
        for(var i=0; i<ary.length; i++){
          if(i!=index) { ary[i].expanded=false; }
          else { data.expanded=!data.expanded; }
        }
      }
  }

And the view/html Code is:
Just tweaked a bit of functionality as per my requirements:

<md-content id="dynamic-content" class="f-clear-padding">
      <div class="md-accordion" ng-repeat="data in accordianData">
        <!-- <md-toolbar ng-init="data.expanded = false" ng-click="data.expanded = !data.expanded"> this was the code in demo-->
        <md-toolbar ng-init="data.expanded = false" ng-click="toggleView(accordianData, data, $index)">
        <div class="md-toolbar-tools">
          <!-- <h2> -->
          <div ng-bind="data.heading"></div>
          <!-- </h2> -->
        <div flex=""></div>
        <div ng-class="{expandCollapse:true, active:data.expanded}"></div>
        </div>
        </md-toolbar>
        <div style="overflow:scroll" ng-class="{dataContent:true, activeContent:data.expanded}">
          <div style="padding:10px" ng-bind-html="data.content"></div>
        </div>
      <div>
    </md-content>

And the css part:

.md-accordion .expandCollapse { width:30px; height:30px; position:relative; font-size:20px; font-weight:bold; cursor:pointer; color:#fff; display:block; margin-top: -2px; margin-left: -2px; overflow:hidden; } 
.md-accordion .expandCollapse:active { border:0px; }
.md-accordion .expandCollapse:before, .md-accordion .expandCollapse:after { width:30px; height:30px; display:block; position:absolute; top:0; left:0; line-height:32px; text-align:center; -webkit-transition: .3s all ease-out; transition: .3s all ease-out; }
.md-accordion .expandCollapse:before { opacity:1 -webkit-transform: rotate(0deg); transform: rotate(0deg); content: "|"; margin-top:-3px; }
.md-accordion .expandCollapse:after { opacity:1; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); content: "|"; margin-left:-3px; }
.md-accordion .active:before { opacity:1; -webkit-transform: rotate(90deg); transform: rotate(90deg); margin-left:3px; margin-top:0px; }
.md-accordion .dataContent { background: #F2F2F2; height:0px; overflow:hidden; -webkit-transition: .3s all ease-out; transition: .3s all ease-out; }
.md-accordion .activeContent { height:60vh; padding:0; display:block; }
.md-accordion md-toolbar{ cursor:pointer; border-bottom:1px solid rgb(63,107,181) }

Here we have fixed the height of the expandable list in order to keep the list items still visible, else once you expand a div having a huge content the user may feel that it's the only list item available and may not be able to see the other items if any of the div is expanded, the overflow:scroll allows the view to be scroll through, else it will be stiff and the user won't be ablt to view the entire content.

Hope this is helpful... :)

like image 199
Kailas Avatar answered Nov 05 '22 11:11

Kailas