JSFiddle - React, Tailwind, and code Playground

by itzfender

HTML

<button id="btnShow">Show</button>
<button id="btnHide">Hide</button>
<button id="btnShowInner">Show Inner</button>

<div class="container">
  <div id="foo">
    I am #foo
    <div id="inner" style="display: none">
      I am #inner
    </div>
  </div>
</div>
<div id="console">
</div>

CSS

.container {
  height: 60px;
  margin: 10px;
}

#foo {
  background-color: #eeeeee;
  width: 150px;
  height: 50px;
  text-align: center;
  font-size: 20px;
}

JavaScript

$('#btnShow').click(function() {
  $('#foo').trigger("click");

});
$('#btnShowInner').click(function(event) {
  
});

$('#btnHide').click(function() {
  $('#foo').hide();
});

(function($) {
  $.each(['show', 'hide'], function(i, ev) {
    console.log("add show hide events");
    console.log(i);
    console.log(ev);
    var el = $.fn[ev];
    //console.log(el);
    $.fn[ev] = function(event) {
      console.log(this.selector);
      console.log(this);
      console.log(ev);
      this.trigger(ev);
      return el.apply(this, arguments);
    };
  });
})(jQuery);


$('#foo').on('click', function() {
  event.stopPropagation();
  $('#console').html($('#console').html() + '#foo is now visible' + '<br>')
});

$('#foo').on('hide', function() {
  $('#console').html($('#console').html() + '#foo is hidden' + '<br>')
});