title: Toggle on and off with jQuery
body: <p>My aim is simple—have my tick/cross toggle on and off (red or green) as the toggle fires.</p>
  
  <p>I have tried so many variations of jQuery but for some reason nothing works.</p>
  
  <p>Here is a link to a JSFiddle: <a href="http://jsfiddle.net/t7nep473/" rel="nofollow">http://jsfiddle.net/t7nep473/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="three columns"&gt; 
    &lt;label class="toggle"&gt;
      &lt;i class="fa fa-close toggle-off active"&gt;&lt;/i&gt;
      &lt;input type="checkbox" class="toggle-input"&gt;
      &lt;div class="toggle-controller default-success"&gt;&lt;/div&gt;
      &lt;i class="fa fa-check toggle-on"&gt;&lt;/i&gt;
    &lt;/label&gt;&lt;!-- END .toggle --&gt;
  &lt;/div&gt;&lt;!-- END .three.columns --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.toggle {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    height: auto;
    width: 7.5rem;
    margin: auto;
    cursor: pointer;
  }
  .toggle-input {
    display: none;
    margin: 0;
  }
  .toggle-off,
  .toggle-on {
    height: 1.8125rem;
    width: 1.8125rem;
    color: rgba(46, 45, 44, 0.1);
    vertical-align: top;
    text-align: center;
    line-height: 1.8125rem !important;
  }
  .toggle-input:checked + .toggle-controller.default-success {
    border: 0.125rem solid rgba(108, 211, 61, 0.75);
    background: rgba(108, 211, 61, 0.375);
  }
  .toggle-input:checked + .toggle-controller.default-success:after {
    left: 1.5625rem;
  }
  .toggle-controller.default-success {
    position: relative;
    display: inline-block;
    height: 1.5625rem;
    width: 3.125rem;
    border: 0.125rem solid rgba(46, 45, 44, 0.05);
    -webkit-border-radius: 1.5625rem;
    -moz-border-radius: 1.5625rem;
    border-radius: 1.5625rem;
    -webkit-box-shadow: inset 0 0 0.1875rem rgba(46, 45, 44, 0.25);
    -moz-box-shadow: inset 0 0 0.1875rem rgba(46, 45, 44, 0.25);
    box-shadow: inset 0 0 0.1875rem rgba(46, 45, 44, 0.25);
    background: rgba(46, 45, 44, 0.025);
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
  }
  .toggle-controller.default-success:after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    display: block;
    height: 1.5625rem;
    width: 1.5625rem;
    -webkit-border-radius: 1.5625rem;
    -moz-border-radius: 1.5625rem;
    border-radius: 1.5625rem;
    -webkit-box-shadow: 0 0.0625rem 0.125rem rgba(46, 45, 44, 0.2);
    -moz-box-shadow: 0 0.0625rem 0.125rem rgba(46, 45, 44, 0.2);
    box-shadow: 0 0.0625rem 0.125rem rgba(46, 45, 44, 0.2);
    background: white;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
  }
  .toggle-off.active {color:red;}
  .toggle-on.active {color:green;}
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function() {
      $('.toggle').click(function() {
          if($(this).find('.toggle-off').hasClass('active')) {
              console.log('This is firing');
              $(this).find('.toggle-off').removeClass('active');
              $(this).find('.toggle-on').addClass('active');
          } else {
              $(this).find('.toggle-off').addClass('active');
              $(this).find('.toggle-on').removeClass('active');
          }
      });
  });
  </code></pre>
  
  <p><strong>Note:</strong> I'm using the Font Awesome Library.</p>
  
  <p>Thanks in advance!</p>