<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Test syntax</title> <script src="../dist/ffnm.min.js"></script> </head> <body> <!-- Class with ID --> <div i-click="class:add('show1', '#menu1')">add</div> <div i-click="class:remove('show2', '#menu2')">remove</div> <div i-click="class:toggle('show3', '#menu3')">toggle</div> <!-- End Class with ID --> <!-- Class with class --> <div i-click="class:add('show1', '.menu1')">add</div> <div i-click="class:remove('show2', '.menu2')">remove</div> <div i-click="class:toggle('show3', '.menu3')">toggle</div> <!-- End Class with class --> <!-- Class with tag --> <div i-click="class:add('show1', 'a')">add</div> <div i-click="class:remove('show2', 'li')">remove</div> <div i-click="class:toggle('show3', 'button')">toggle</div> <!-- End Class with tag --> <!-- Class with ID --> <div i-scroll-up="class:add('show1', '#menu1')">add</div> <div i-scroll-up="class:remove('show2', '#menu2')">remove</div> <div i-scroll-up="class:toggle('show3', '#menu3')">toggle</div> <!-- End Class with ID --> <!-- Class with class --> <div i-scroll-up="class:add('show1', '.menu1')">add</div> <div i-scroll-up="class:remove('show2', '.menu2')">remove</div> <div i-scroll-up="class:toggle('show3', '.menu3')">toggle</div> <!-- End Class with class --> <!-- Class with tag --> <div i-scroll-up="class:add('show1', 'a')">add</div> <div i-scroll-up="class:remove('show2', 'li')">remove</div> <div i-scroll-up="class:toggle('show3', 'button')">toggle</div> <!-- End Class with tag --> <!-- Class with ID --> <div i-scroll-down="class:add('show1', '#menu1')">add</div> <div i-scroll-down="class:remove('show2', '#menu2')">remove</div> <div i-scroll-down="class:toggle('show3', '#menu3')">toggle</div> <!-- End Class with ID --> <!-- Class with class --> <div i-scroll-down="class:add('show1', '.menu1')">add</div> <div i-scroll-down="class:remove('show2', '.menu2')">remove</div> <div i-scroll-down="class:toggle('show3', '.menu3')">toggle</div> <!-- End Class with class --> <!-- Class with tag --> <div i-scroll-down="class:add('show1', 'a')">add</div> <div i-scroll-down="class:remove('show2', 'li')">remove</div> <div i-scroll-down="class:toggle('show3', 'button')">toggle</div> <!-- End Class with tag --> <!-- Class with ID --> <div i-hover="class:add('show1', '#menu1')">add</div> <div i-hover="class:remove('show2', '#menu2')">remove</div> <div i-hover="class:toggle('show3', '#menu3')">toggle</div> <!-- End Class with ID --> <!-- Class with class --> <div i-hover="class:add('show1', '.menu1')">add</div> <div i-hover="class:remove('show2', '.menu2')">remove</div> <div i-hover="class:toggle('show3', '.menu3')">toggle</div> <!-- End Class with class --> <!-- Class with tag --> <div i-hover="class:add('show1', 'a')">add</div> <div i-hover="class:remove('show2', 'li')">remove</div> <div i-hover="class:toggle('show3', 'button')">toggle</div> <!-- End Class with tag --> <!-- Class with ID --> <div i-view="class:add('show1', '#menu1')">add</div> <div i-view="class:remove('show2', '#menu2')">remove</div> <div i-view="class:toggle('show3', '#menu3')">toggle</div> <!-- End Class with ID --> <!-- Class with class --> <div i-view="class:add('show1', '.menu1')">add</div> <div i-view="class:remove('show2', '.menu2')">remove</div> <div i-view="class:toggle('show3', '.menu3')">toggle</div> <!-- End Class with class --> <!-- Class with tag --> <div i-view="class:add('show1', 'a')">add</div> <div i-view="class:remove('show2', 'li')">remove</div> <div i-view="class:toggle('show3', 'button')">toggle</div> <!-- End Class with tag --> <!-- Errors --> <div i-click="class:dd('show1', '.menu1')">add</div> </body> </html>