1 | # handy-collaps.js
|
2 |
|
3 | A pure Javascript module for accordion/collapse UI without jQuery.
|
4 | [> examples](https://handy-collapse.netlify.com/)
|
5 |
|
6 | [![NPM](https://nodei.co/npm/handy-collapse.png?compact=true)](https://nodei.co/npm/handy-collapse/)
|
7 |
|
8 | [![npm version](https://badge.fury.io/js/handy-collapse.svg)](https://badge.fury.io/js/handy-collapse)
|
9 | [![Netlify Status](https://api.netlify.com/api/v1/badges/339e9248-8aae-456a-8a3b-345a01138f98/deploy-status)](https://app.netlify.com/sites/handy-collapse/deploys)
|
10 |
|
11 | ## Usage
|
12 |
|
13 | ### Install
|
14 |
|
15 | Using npm or yarn, install handy-collapse
|
16 | [> npm](https://www.npmjs.com/package/handy-collapse)
|
17 |
|
18 | ```sh
|
19 | npm install handy-collapse
|
20 | ```
|
21 | ```sh
|
22 | yarn add handy-collapse
|
23 | ```
|
24 |
|
25 | ### Import
|
26 |
|
27 | ```javascript
|
28 | import HandyCollapse from "handy-collapse";
|
29 | ```
|
30 |
|
31 |
|
32 | ### Initialize
|
33 |
|
34 | ```javascript
|
35 | new HandyCollapse(options);
|
36 | ```
|
37 |
|
38 | ### Markup
|
39 |
|
40 | #### Minimum markup
|
41 |
|
42 | ```html
|
43 | <!--
|
44 | Add data attribute, button/content element.
|
45 | Control Button: data-{namespase}-control="{ID}" * multiple elements
|
46 | Toggle Content: data-{namespase}-content="{ID}" * only one element
|
47 | -->
|
48 | <button type="button" data-hc-control="uniqID">Show/Hide Content</button>
|
49 |
|
50 | <div data-hc-content="uniqID">Toggle Content</div>
|
51 | ```
|
52 |
|
53 | #### With `aria-*` attribute for accessibility
|
54 |
|
55 | ```html
|
56 | <button type="button" data-hc-control="uniqID" aria-expanded="false" aria-controls="contentID">
|
57 | Show/Hide Content
|
58 | </button>
|
59 |
|
60 | <div id="contentID" data-hc-content="uniqID" aria-hidden="true">Toggle Content</div>
|
61 | ```
|
62 |
|
63 | ## Options
|
64 |
|
65 | | Option Name | Type | Default | Desc |
|
66 | | ----------------- | ---------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
67 | | nameSpace | string | "hc" | Set namespace both "toggleButtonAttr" & "toggleContentAttr" |
|
68 | | toggleButtonAttr | string | "data-hc-control" | data attribute for Button Element |
|
69 | | toggleContentAttr | string | "data-hc-content" | data attribute for Content Element |
|
70 | | activeClass | string | "is-active" | Add class on opened Element |
|
71 | | isAnimation | boolean | true | animation Slide |
|
72 | | closeOthers | boolean | true | Close others Content |
|
73 | | animationSpeed | number | 400 | css transition duration(ms) |
|
74 | | cssEasing | string | "ease-in-out" | css transition easing (only isAnimation:true) |
|
75 | | onSlideStart | (isOpen:boolean,contentID:string)=> void | () => void | Callback on Open/Close Animation Start <br> @param {Boolean} isOpen <br> @param {String} contentID \* Don't ID Attribute |
|
76 | | onSlideEnd | (isOpen:boolean,contentID:string)=> void | () => void | Callback on Open/Close Animation End <br> @param {Boolean} isOpen <br> @param {String} contentID \* Don't ID Attribute |
|
77 |
|
78 | ## Methods
|
79 |
|
80 | Open/Close Content
|
81 |
|
82 | ```javascript
|
83 | handyCollapse.open(contentID, [isRunCallback, isAnimation]);
|
84 | ```
|
85 |
|
86 | ```javascript
|
87 | handyCollapse.close(contentID, [isRunCallback, isAnimation]);
|
88 | ```
|
89 |
|
90 | ## Sample
|
91 |
|
92 | [examples](https://handy-collapse.netlify.com/)
|
93 |
|
94 | ### JS
|
95 |
|
96 | ```javascript
|
97 | //Default Options
|
98 | const myAccrodion = new HandyCollapse();
|
99 |
|
100 | //Full Options
|
101 | const myAccrodionCustom = new HandyCollapse({
|
102 | nameSpace: "hc", // Note: Be sure to set different names when creating multiple instances
|
103 | activeClass: "is-active",
|
104 | isAnimation: true,
|
105 | closeOthers: true,
|
106 | animationSpeed: 400,
|
107 | cssEasing: "ease",
|
108 | onSlideStart: (isOpen, contentID) => {
|
109 | console.log(isOpen);
|
110 | const buttonEl = document.querySelectorAll(`[data-hc-control='${contentID}']`);
|
111 | console.log(buttonEl);
|
112 | },
|
113 | onSlideEnd: (isOpen, contentID) => {
|
114 | console.log(isOpen);
|
115 | const contentEl = document.querySelector(`[data-hc-content='${contentID}']`);
|
116 | console.log(contentEl);
|
117 | }
|
118 | });
|
119 |
|
120 | // Open by Js
|
121 | myAccrodion.open("content01");
|
122 |
|
123 | // Close by Js
|
124 | myAccrodion.close("content01");
|
125 | ```
|
126 |
|
127 | ### HTML
|
128 |
|
129 | ```html
|
130 | <!--
|
131 | BUTTON : data-{namespase}-control="{ID}" * multiple element
|
132 | CONTENT: data-{namespase}-content="{ID}" * only one element
|
133 | -->
|
134 | <!-- basic -->
|
135 | <button type="button" data-hc-control="content01" aria-expanded="false" aria-controls="basicContent01">
|
136 | Show/Hide Content 01
|
137 | </button>
|
138 | <div id="basicContent01" data-hc-content="content01" aria-hidden="true">... Content 01 ...</div>
|
139 |
|
140 | <!-- if add activeClass(def: "is-active"), Opened on init. -->
|
141 | <button
|
142 | type="button"
|
143 | class="is-active"
|
144 |
|
145 | data-hc-control="content02"
|
146 | aria-expanded="true"
|
147 | aria-controls="basicContent02"
|
148 | >
|
149 | Show/Hide Content 02
|
150 | </button>
|
151 | <div id="basicContent02" class="is-active" data-hc-content="content02" aria-hidden="false">... Content 02 ...</div>
|
152 |
|
153 | <!-- can use nested accordion -->
|
154 | <button type="button" data-hc-control="parentContent" aria-expanded="true" aria-controls="netstedParantContent">
|
155 | Show/Hide parent content
|
156 | </button>
|
157 | <div id="netstedParantContent" data-hc-content="parentContent" aria-hidden="true">
|
158 | ... parent content ...
|
159 | <button type="button" data-hc-control="childContent" aria-expanded="true" aria-controls="netstedChiledContent">
|
160 | Show/Hide child content
|
161 | </button>
|
162 | <div id="netstedChiledContent" data-hc-content="childContent" aria-hidden="true">... child content ...</div>
|
163 | </div>
|
164 | ```
|
165 |
|
166 | ## License
|
167 |
|
168 | [MIT](./LICENSE.txt)
|