Show/Hide Function

by Alvin Olavarrieta

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="preferences">
  <div class="row">
    <div class="col-xs-6">
      <li>
        <i class="fa fa-square-o"></i>Facebook
      </li>
      <li>
        <i class="fa fa-square-o"></i>Instagram
      </li>
    </div>
    <div class="col-xs-6">
      <li>
        <i class="fa fa-square-o"></i>Youtube
      </li>
      <li>
        <i class="fa fa-square-o"></i>Other
      </li>
    </div>
  </div>
</ul>

JavaScript

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

  $('.preferences li').click(function() {
    $(this).find('i').toggleClass('fa-square-o').toggleClass('fa-check-square-o');
  })
  $('.survey-list li').click(function() {
    $(this).find('i').toggleClass('fa-square-o').toggleClass('fa-check-square-o');
  })

});