File tree Expand file tree Collapse file tree 1 file changed +57
-0
lines changed
Expand file tree Collapse file tree 1 file changed +57
-0
lines changed Original file line number Diff line number Diff line change 11
2+ # ui-accordion
3+
4+ ## simple accordion in angular js
5+
6+ #Installing
7+ #### Bower
8+ ``` javascript
9+ bower install ui- accordion
10+ < script src= " bower_components/ui-accordion/dist/scripts/ui-accordion.js" >< / script>
11+ ```
12+ #### CDN
13+
14+ ##### You can use rawgit.com's cdn url to access the files in the Bower repository. These files are hosted by MaxCDN. Just alter the version as you need.
15+
16+ * https://rawgit.com/kuldeepkeshwar/ui-accordion/master/dist/scripts/ui-accordion.js
17+ * https://rawgit.com/kuldeepkeshwar/ui-accordion/master/dist/scripts/ui-accordion.min.js
18+
19+ ## Usage :
20+
21+ #### HTML
22+ ``` html
23+ <ul ui-accordion >
24+ <li ui-accordion-group >
25+ <h3 ui-accordion-heading > Heading1</h3 >
26+ <div ui-accordion-body > Body1</div >
27+ </li >
28+ <li ui-accordion-group options =" options" >
29+ <h3 ui-accordion-heading > Heading2</h3 >
30+ <div ui-accordion-body > Body2</div >
31+ </li >
32+ <li ui-accordion-group >
33+ <h3 ui-accordion-heading > Heading3</h3 >
34+ <div ui-accordion-body > Body3</div >
35+ </li >
36+ <ul >
37+ ```
38+ ##### CODE
39+ ``` javascript
40+ angular .module (' myApp' ,[' uiAccordion' ]);
41+ angular .module (' myApp' ).controller (" myCtrl" ,function ($scope ){
42+ // options(optional) for accordion group
43+ $scope .options = {
44+ beforeOpen : function (){ // promise which is resolved before showing accordion body
45+ var def= $q .defer ();
46+ // busy doing some stuff
47+ def .resolve ();
48+ return def .promise ;
49+ },
50+ beforeHide : function (){// promise which is resolved before hidding accordion body
51+ var def= $q .defer ();
52+ // busy doing some stuff
53+ def .resolve ()
54+ return def .promise ;
55+ }
56+ }
57+ });
58+ ```
You can’t perform that action at this time.
0 commit comments