<!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>