Checkbox click for the each

by Ying Chor Ding

HTML

<ul class="credit-mode-ul">
  <li>
    <input type="checkbox" id="credit-mode-1"> Direct Credit</li>
  <li>
    <input type="checkbox" id="credit-mode-2"> Credit by EB</li>
  <li>
    <input type="checkbox" id="credit-mode-3"> Cash in Advance</li>
</ul>
<p class="credit-mode-hidden option-credit-mode-1"> This is option one</p>
<p class="credit-mode-hidden option-credit-mode-2"> This is another Two</p>
<p class="credit-mode-hidden option-credit-mode-3"> This is option Three</p>

CSS

.credit-mode-ul {
  margin: 0;
  padding: 0;
}

.credit-mode-ul li {
  list-style: none;
}

.credit-mode-hidden {
  display: none;
}

JavaScript

$('.credit-mode-ul li input:checkbox').change(function() {
  var option = 'option-' + $(this).attr('id');
  if ($('.' + option).css('display') == 'none') {
    $('.' + option).fadeIn();
  } else {
    $('.' + option).fadeOut();
  }
});