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:
154154
155155 <main id =" panel" >
156156 <header >
157- <button >☰</button >
157+ <button class = " toggle-button " >☰</button >
158158 <h2 >Panel</h2 >
159159 </header >
160160 </main >
@@ -167,6 +167,11 @@ Then you just include Slideout.js and create a new instance with some options:
167167 ' padding' : 256 ,
168168 ' tolerance' : 70
169169 });
170+
171+ // Toggle button
172+ document .querySelector (' .toggle-button' ).addEventListener (' click' , function () {
173+ slideout .toggle ();
174+ });
170175 </script >
171176
172177 </body >
@@ -249,6 +254,22 @@ $ npm test
249254$ npm run hint
250255```
251256
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+
252273## With ❤ by
253274- Guille Paz (Front-end developer | Web standards lover)
254275- E-mail: [ guille87paz@gmail.com ] ( mailto:guille87paz@gmail.com )
You can’t perform that action at this time.
0 commit comments