Question

I have a interface that uses the click attribute of a checkbox to show/hide a div.

This is an example chunk of code to show or hide a feature:

Display/Hide jQuery 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();
    }
});

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.

This is the jQuery code for the fancy checkboxes.

Fancy Checkbox jQuery 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;
});

and to display them I use:

case 'fancycheckbox':
        echo '<div class="asw-switch-link">';
        echo '<a href="#" rel="true" class="link-true ';
        echo esc_attr($options[$id]) == 'true' ? 'active' : '' ;
        echo '"></a>';
        echo '<a href="#" rel="false" class="link-false ';
        echo esc_attr($options[$id]) == 'false' ? 'active' : '' ;
        echo '"></a></div>';
        echo '<input id="'.$id.'" name="'.$this->prefix.'_options['.$id.']" class="plugin-switch-value" type="hidden" value="'.esc_attr($options[$id]).'" />';

        if($desc != '')
            echo '<span class="description">'.$desc.'</span>';

        break;

The above code is part of a WordPress plugin I am developing.

The issue

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.

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

I thought something like this might work

/* 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();
    }
});

but it doesn’t work.

Any help would be greatly appreciated

HTML Code

This is the HTML source code for the LinkedIn checkbox

    <label for="display_linkedin_icon">Display LinkedIn icon?</label></th>
    <div class="asw-switch-link"><a href="#" rel="true" class="link-true active"></a><a href="#" rel="false" class="link-false "></a></div>
    <input id="display_linkedin_icon" name="asw_options[display_linkedin_icon]" class="plugin-switch-value" type="hidden" value="true" />
<span class="description">URL will be the blog article URL or page URL.</span>

The toggled #LinkedIn div

<ul id="asw-sortable">
<li id="Delicious"><span class="sortable-Delicious"></span><span class="sn">Delicious</span></li>
<li id="Twitter"><span class="sortable-Twitter"></span><span class="sn">Twitter</span></li>
<li id="Facebook"><span class="sortable-Facebook"></span><span class="sn">Facebook</span></li>
<li id="Googleplus"><span class="sortable-Googleplus"></span><span class="sn">Googleplus</span></li>
<li id="Stumbleupon"><span class="sortable-Stumbleupon"></span><span class="sn">Stumbleupon</span></li>
<li id="Pinterest"><span class="sortable-Pinterest"></span><span class="sn">Pinterest</span></li>
<li id="LinkedIn"><span class="sortable-LinkedIn"></span><span class="sn">LinkedIn</span></li>
<li id="Youtube"><span class="sortable-Youtube"></span><span class="sn">Youtube</span></li>

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.

Update

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.

jQuery to display #LinkedIn on page load if value = ‘true’

$('#LinkedIn').hide();
if ($('#display_linkedin_icon').val() == 'true') {
    $('#LinkedIn').show();
}

I still cannot get the #LinkedIn div to toggle though depending on what the value of the fancy checkbox is.

Have tried this function to toggle the #LinkedIn div

   $('#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();
    }
});

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

Answer 1

Not to oversimplify but this should work fine:

$('#display_linkedin_icon').click(function() {
    $('#LinkedIn').toggle( $(this).toggleClass('active').hasClass('active') );
});

I use the non-deprecated .on() vs .live().

I toggle the active class on the clicked element.

Last I toggle #LinkedIn based of the clicked element .hasClass().

Poetry.