Job of the day - Job Matches

by Alvin Olavarrieta

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<ul>
  <li>
    <span>Title</span>
    <a href="#" class="circle">Yes</a>
    <a href="#" class="circle">No</a>
  </li>
  <li class="opaque">
    <span>Title</span>
    <a href="#" class="circle">Yes</a>
    <a href="#" class="circle">No</a>
  </li>
  <li class="opaque">
    <span>Title</span>
    <a href="#" class="circle">Yes</a>
    <a href="#" class="circle">No</a>
  </li>
  <li class="opaque">
    <span>Title</span>
    <a href="#" class="circle">Yes</a>
    <a href="#" class="circle">No</a>
  </li>
  <li class="opaque">
    <span>Title</span>
    <a href="#" class="circle">Yes</a>
    <a href="#" class="circle">No</a>
  </li>
</ul>

CSS

ul li.opaque {
  opacity: 0.4;
}

JavaScript

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

$('.circle').click(function() {
  $(this).closest('li').next('li').removeClass('opaque');
  $(this).closest('li').slideUp(500, "easeInOutQuart");
  $(this).addClass('selected');
});