File tree Expand file tree Collapse file tree 1 file changed +22
-1
lines changed Expand file tree Collapse file tree 1 file changed +22
-1
lines changed Original file line number Diff line number Diff line change @@ -154,7 +154,7 @@ Then you just include Slideout.js and create a new instance with some options:
154
154
155
155
<main id =" panel" >
156
156
<header >
157
- <button >☰</button >
157
+ <button class = " toggle-button " >☰</button >
158
158
<h2 >Panel</h2 >
159
159
</header >
160
160
</main >
@@ -167,6 +167,11 @@ Then you just include Slideout.js and create a new instance with some options:
167
167
' padding' : 256 ,
168
168
' tolerance' : 70
169
169
});
170
+
171
+ // Toggle button
172
+ document .querySelector (' .toggle-button' ).addEventListener (' click' , function () {
173
+ slideout .toggle ();
174
+ });
170
175
</script >
171
176
172
177
</body >
@@ -249,6 +254,22 @@ $ npm test
249
254
$ npm run hint
250
255
```
251
256
257
+ ## FAQ
258
+
259
+ ### How to add a toggle button.
260
+
261
+ ``` js
262
+ // vanilla js
263
+ document .querySelector (' .toggle-button' ).addEventListener (' click' , function () {
264
+ slideout .toggle ();
265
+ });
266
+
267
+ // jQuery
268
+ $ (' .toggle-button' ).on (' click' , function () {
269
+ slideout .toggle ();
270
+ });
271
+ ```
272
+
252
273
## With ❤ by
253
274
- Guille Paz (Front-end developer | Web standards lover)
254
275
- E-mail: [ guille87paz@gmail.com ] ( mailto:guille87paz@gmail.com )
You can’t perform that action at this time.
0 commit comments