I found a solution that works, but this may not be the correct way to do this. The example on the MDB website DOES work, so not sure why I needed this workaround. The Workaround 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
        });
    }
}

---