Accordion using Angularjs

In this post i will discuss about how to make a simple accordion using Angularjs. AngularJS is an amazing javascript framework introduced by Google. To make an accordion we need following libraries:

• AngularJS 1.2.x Libray
• AngularJs-UI bootstrap Library
• Bootstrap Library

Instead of download and fetch you can also use following cdn(content delivery network)

• AngularJS:<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
• AngularJS-UI Bootstrap:<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
• Bootstrap:<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

Step 1 : Index file should be look like this

index.html

          
            <!doctype html >
            <html >
            <head>
                  <title > Accordion in AngularJS  </title>
                  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
                  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
                  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
            </head >
            <body >
                       .......
            </body >
            </html>
          
         

Step 2 : Make a module and add it to your code

Create a file say myJS.js and add the following code in that

                    var app= angular.module('myApp',['ui.bootstrap']);
 
                    
            

In this code i am registering a module using angular.module() function provided by angularjs library. In this code i am declaring the name of the module that is "myApp" and i am specifying the dependency i.e. "ui.bootstrap" in an array notation you can also specify other dependencies according to requirement in the same array. Now i am assigning the module to a java script variable app. Now app is referencing to myApp module. Now add this myJS.js File to you index.html file. And include the module in your html code using ng-app directive.

index.html

          
            <!doctype html >
            <html ng-app="myApp">
            <head>
                  <title > Accordion in AngularJS  </title>
                  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
                  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
                  <script src="myJS.js"></script>
                  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
            </head >
            <body >
                       .......
            </body >
            </html>
          
         

Step 3 : Start making your accordion

               <div class="container">
               <div class="row">
                <div class="col-xs-6">
                    <accordion close-others="true">
                        <accordion-group heading="Home">
                            Home
                        </accordion-group>
                        <accordion-group heading="File in Trey">
                            File in Trey
                        </accordion-group>
                     </accordion>
                </div>
               </div>  
            

In this the main part is <accordion> tag in this tag i am using close-others which is the attribute provided by the angularjs-ui bootstrap library this attribute if true than you can able to open only one accordion at a time but if it will be false than you can able to open more than one accordion at a time. Inside <accordion> tag i am using <accordion-group> which is used to add the option in accordion and heading attribute is used to add heading of accordion.

Finally Your File should be look like this

index.html

          
            <!doctype html >
            <html ng-app="myApp">
            <head>
                  <title > Accordion in AngularJS  </title>
                  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
                  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
                  <script src="myJS.js"></script>
                  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
            </head >
            <body >
               <div class="container">
               <div class="row">
                <div class="col-xs-6">
                    <accordion close-others="true">
                        <accordion-group heading="Home">
                            Home
                        </accordion-group>
                        <accordion-group heading="File in Trey">
                            File in Trey
                        </accordion-group>
                     </accordion>
                </div>
               </div>  
           
            </body >
            </html>
          
         

You can view the code here

index.html:https://drive.google.com/file/d/0B7oyevBghqewZXRwcmtBaHRsSHM/view?usp=sharing
myJS.js : https://drive.google.com/file/d/0B7oyevBghqewb01MVGQxeDZIZkU/view?usp=sharing