JSFiddle - React, Tailwind, and code Playground

HTML

<a class="js-test" id="myLazyUl" style="border: solid 1px #000;">Test 1</a>
<input type="button" id="btnHide" title="Hide" name="Hide" value="Hide" />
<input type="button" id="btnShow" title="Show" name="Show" value="Show" />

JavaScript

$.each(["show", "visibilityChanged", "css", "toggleClass", "addClass", "removeClass"], function(){
    var _oldFn = $.fn[this];
    $.fn[this] = function(){
        var hidden = this.find(":hidden").add(this.filter(":hidden"));
        var result = _oldFn.apply(this, arguments);
        hidden.filter(":visible").each(function(){
            $(this).triggerHandler("show"); //No bubbling
        });
        return result;
    }
});

$("#myLazyUl").bind("show", function(){
    alert('Show clicked');
});

$("#btnHide").click(function(){
    $("#myLazyUl").hide();
});

$("#btnShow").click(function(){
    $("#myLazyUl").css('display', 'block');
});