title: Issues changing jQuery prop() to hasclass() function
body: <p>I have a interface that uses the click attribute of a checkbox to show/hide a div.</p>
  
  <p>This is an example chunk of code to show or hide a feature:</p>
  
  <p><strong>Display/Hide jQuery Code</strong></p>
  
  <pre><code>/* Only display LinkedIn sortable icon if "Display LinkedIn" is ticked */
  $('#display_linkedin_icon').live("click", function() {
      if ($('#display_linkedin_icon').prop("checked")) {
          $('#LinkedIn').show();
      }
      else {
          $('#LinkedIn').hide();
      }
  });
  </code></pre>
  
  <p>This works great, however I want to change out the normal checkboxes for some fancy jQuery styled checkbox. I want the same jQuery action to still be fired when the fancy checkbox is checked. The checkboxes are simular to the jQuery iPhone checkboxes.</p>
  
  <p>This is the jQuery code for the fancy checkboxes.</p>
  
  <p><strong>Fancy Checkbox jQuery Code</strong></p>
  
  <pre><code>$('.asw-switch-link a').live('click',function(){
      var $tag = $(this).parent();
      $('a',$tag).toggleClass('active');
      var rel = $('a.active',$tag).attr('rel');
      $tag.next('.plugin-switch-value').val(rel);
  
      return false;
  });
  </code></pre>
  
  <p>and to display them I use:</p>
  
  <pre><code>case 'fancycheckbox':
          echo '&lt;div class="asw-switch-link"&gt;';
          echo '&lt;a href="#" rel="true" class="link-true ';
          echo esc_attr($options[$id]) == 'true' ? 'active' : '' ;
          echo '"&gt;&lt;/a&gt;';
          echo '&lt;a href="#" rel="false" class="link-false ';
          echo esc_attr($options[$id]) == 'false' ? 'active' : '' ;
          echo '"&gt;&lt;/a&gt;&lt;/div&gt;';
          echo '&lt;input id="'.$id.'" name="'.$this-&gt;prefix.'_options['.$id.']" class="plugin-switch-value" type="hidden" value="'.esc_attr($options[$id]).'" /&gt;';
  
          if($desc != '')
              echo '&lt;span class="description"&gt;'.$desc.'&lt;/span&gt;';
  
          break;
  </code></pre>
  
  <p>The above code is part of a WordPress plugin I am developing.</p>
  
  <p><strong>The issue</strong></p>
  
  <p>The issue is that I have now changed the normal checkboxes to the fancy checkboxes so the jQuery "click" function does not work any more.</p>
  
  <p>From looking at the fancy checkbox jQuery code I thought I might have to check for the CSS class "active" using the JQuery hasclass() function instead of the .prop('checked") function</p>
  
  <p>I thought something like this might work</p>
  
  <pre><code>/* Only display LinkedIn sortable icon if "Display LinkedIn" is ticked */
  $('#display_linkedin_icon').live("click", function() {
      if ($('#display_linkedin_icon').hasclass("active")) {
          $('#LinkedIn').show();
      }
      else {
          $('#LinkedIn').hide();
      }
  });
  </code></pre>
  
  <p>but it doesn't work.</p>
  
  <p>Any help would be greatly appreciated</p>
  
  <p><strong>HTML Code</strong></p>
  
  <p>This is the HTML source code for the LinkedIn checkbox</p>
  
  <pre><code>    &lt;label for="display_linkedin_icon"&gt;Display LinkedIn icon?&lt;/label&gt;&lt;/th&gt;
      &lt;div class="asw-switch-link"&gt;&lt;a href="#" rel="true" class="link-true active"&gt;&lt;/a&gt;&lt;a href="#" rel="false" class="link-false "&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;input id="display_linkedin_icon" name="asw_options[display_linkedin_icon]" class="plugin-switch-value" type="hidden" value="true" /&gt;
  &lt;span class="description"&gt;URL will be the blog article URL or page URL.&lt;/span&gt;
  </code></pre>
  
  <p><strong>The toggled #LinkedIn div</strong></p>
  
  <pre><code>&lt;ul id="asw-sortable"&gt;
  &lt;li id="Delicious"&gt;&lt;span class="sortable-Delicious"&gt;&lt;/span&gt;&lt;span class="sn"&gt;Delicious&lt;/span&gt;&lt;/li&gt;
  &lt;li id="Twitter"&gt;&lt;span class="sortable-Twitter"&gt;&lt;/span&gt;&lt;span class="sn"&gt;Twitter&lt;/span&gt;&lt;/li&gt;
  &lt;li id="Facebook"&gt;&lt;span class="sortable-Facebook"&gt;&lt;/span&gt;&lt;span class="sn"&gt;Facebook&lt;/span&gt;&lt;/li&gt;
  &lt;li id="Googleplus"&gt;&lt;span class="sortable-Googleplus"&gt;&lt;/span&gt;&lt;span class="sn"&gt;Googleplus&lt;/span&gt;&lt;/li&gt;
  &lt;li id="Stumbleupon"&gt;&lt;span class="sortable-Stumbleupon"&gt;&lt;/span&gt;&lt;span class="sn"&gt;Stumbleupon&lt;/span&gt;&lt;/li&gt;
  &lt;li id="Pinterest"&gt;&lt;span class="sortable-Pinterest"&gt;&lt;/span&gt;&lt;span class="sn"&gt;Pinterest&lt;/span&gt;&lt;/li&gt;
  &lt;li id="LinkedIn"&gt;&lt;span class="sortable-LinkedIn"&gt;&lt;/span&gt;&lt;span class="sn"&gt;LinkedIn&lt;/span&gt;&lt;/li&gt;
  &lt;li id="Youtube"&gt;&lt;span class="sortable-Youtube"&gt;&lt;/span&gt;&lt;span class="sn"&gt;Youtube&lt;/span&gt;&lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>The above code is part of a sortable section. I included all the icons so you can see that once I figure this out for the LinkedIn icon I duplicate the code for the other icons.</p>
  
  <p><strong>Update</strong></p>
  
  <p>OK, so far I have got the #LinkedIn div to show on page load by checking for the hidden form field value. If the hidden field is set to 'true' the #LinkedIn div will be displayed.</p>
  
  <p><strong>jQuery to display #LinkedIn on page load if value = 'true'</strong></p>
  
  <pre><code>$('#LinkedIn').hide();
  if ($('#display_linkedin_icon').val() == 'true') {
      $('#LinkedIn').show();
  }
  </code></pre>
  
  <p>I still cannot get the #LinkedIn div to toggle though depending on what the value of the fancy checkbox is.</p>
  
  <p>Have tried this function to toggle the #LinkedIn div</p>
  
  <pre><code>   $('#ch_display_linkedin_icon').click(function() {
          $('#LinkedIn').toggle( $(this).toggleClass('active').hasClass('active') );
      if ($('#ch_display_linkedin_icon').hasClass('active')) {
          $('#LinkedIn').hide();
      }
      else {
          $('#LinkedIn').show();
      }
  });
  </code></pre>
  
  <p>I have added an ID to the fancy checkbox.
  This above jQuery DOES start to toggle the #LinkedIn div however not always in the correct order. Almost there</p>