Show / Hide Function

by Alvin Olavarrieta

HTML

<h1>Show / Hide Function</h1>

<a href="#" data-show=".content">Click to show</a>
<a href="#" data-show=".toggle">Click to show</a>

<p class="hide content">
Some content..
<a href="#" data-hide=".content">Click to hide</a>
</p>

CSS

.hide {
  display: none;
}

JavaScript

$('input[type=radio],input[type=checkbox],input[type=button],a,li,div,button,span').on('click', function() {
  var input = $(this),
      show = input.data('show'),
      hide = input.data('hide'),
      toggle = input.data('toggle');
      
      console.log(show);
      
  hide ? $(hide).hide() : '';
  show ? $(show).fadeIn() : '';
  toggle ? $(toggle).fadeToggle() : '';
});