Floating Action Button (FAB)

I was able to correct a similar issue with my "fixed-action-btn". There are functions created in the page load for openFAB() and closeFAB(). They are bound to mouseenter and mouseleave events only though. So I created a single function and added it to my main.js library (see below). All it does it make the same calls but it will behave like a toggle depending on if the "active" class exists on the button". Just bind the "toggleFABMenu" function to the click event of the button. Works pretty good and retains hover functionality for those working with a mouse.

$('#btnFixed1').on({
	click: function (e) {
	e.preventDefault();
        toggleFABMenu($('#btnFixed1'));
        return false;
    }
});

Here is the function to create/add.

function toggleFABMenu(btn) {

    $this = btn;
    if ($this.hasClass('active') === false) {
        $this.addClass('active');
        $this.find('ul .btn-floating').velocity({
            scaleY: ".4",
            scaleX: ".4",
            translateY: "40px"
        }, {
            duration: 0
        });

        var time = 0;
        $this.find('ul .btn-floating').reverse().each(function () {
            $(this).velocity({
                opacity: "1",
                scaleX: "1",
                scaleY: "1",
                translateY: "0"
            }, {
                duration: 80,
                delay: time
            });
            time += 40;
        });
    } else {
        $this.removeClass('active');
        var time = 0;
        $this.find('ul .btn-floating').velocity("stop", true);
        $this.find('ul .btn-floating').velocity({
            opacity: "0",
            scaleX: ".4",
            scaleY: ".4",
            translateY: "40px"
        }, {
            duration: 80
        });
    }
}

---