JSFiddle - React, Tailwind, and code Playground

by Eugene Vilder

HTML

<div id="areaWraper">
    <div id="container">test</div>
</div>

<input type="button" id="showBtnId" value="show" />
<input type="button" id="hideBtnId" value="hide" />
<input type="button" id="getStatus" value="status" />

CSS

#areaWraper {
    padding:50px;
    background:red;
}
#container {
    padding:50px;
    background:green;
    color:white;
}

JavaScript

/*var _oldShow = $.fn.show;

  $.fn.show = function(speed, oldCallback) {
    return $(this).each(function() {
      var obj         = $(this),
          newCallback = function() {
            if ($.isFunction(oldCallback)) {
              oldCallback.apply(obj);
            }
            obj.trigger('afterShow');
          };

      // you can trigger a before show if you want
      obj.trigger('beforeShow');

      // now use the old function to show the element passing the new callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }

    $('#myDiv')
    .bind('beforeShow', function() {
      alert('beforeShow');
    }) 
    .bind('afterShow', function() {
      alert('afterShow');
   });*/
  
(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var ev = new $.Event('visible');
        console.log(this);
        orig.apply(this, arguments);
        $(this).trigger(ev);
    }
})();



$('#container').bind('visible', function(e) {
    console.log( $(this).is(':visible') );
});


$('#container').show();




  $('#showBtnId').click(function(){
      $('#container').show();
  });
$('#hideBtnId').click(function(){
      $('#container').hide();
  });
  

$('#getStatus').click(function(){
    var status = $('#container').is(':visible');
    alert('Wraper is ' + ( !status ? 'in' : '' ) + 'visible');
});