Issue toggling a div using jQuery

Question

I have a div that if clicked toggles another div further down the page.

This is the HTML of the div that should do the toggling:

<div id="ch_display_linkedin_icon" class="asw-switch-link">
<a class="link-true active" rel="true" href="#"></a>
<a class="link-false" rel="false" href="#"></a>
</div>

You will notice that the link-true class has another attribute of active. This is added by another art of jQuery if the div if clicked.

At the moment a with the active class is the active div.

What I want to do is change the value of another div further down the page called #LinkedIn dependent on the value of the #ch_display_linkedin_icon

Basically I want to say, if

<a class="link-true active" rel="true" href="#"></a>

has the class of active then display the #LinkedIn div otherwise if

<a class="link-false active" rel="false" href="#"></a>

has the active then hide the #LinkedIn div.

What I need to do is using jQuery be able to get the value of the ch_display_linkedin_icon and display the #LinkedIn div only if it has the active class.

Have started with

$('#ch_display_linkedin_icon').live("click", function() {
});

but am not sure how to get the child element of the a.

Any help would be greatly appreciated.

Answer 1

Use this

  $(document).ready( function() {
        $('#LinkedIn').hide();
        /* This is the code to toggle the checkbox */
        $('.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);
           if ($('#display_linkedin_icon').val() != 'true') {
            $('#LinkedIn').show();
           }else{
               $('#LinkedIn').hide();
           }

            return false;
        });

        $('#ch_display_linkedin_icon').click(function() {
            $('#LinkedIn').toggle($('a.link-true.active', this).length > 0);
        });
   });

see the fiddle

Answer 2

I'd do something like this:

$(document).on('click', '#ch_display_linkedin_icon', function() {
    $('#LinkedIn').toggle($('a.link-true.active', this).length > 0);
});

Ideally, replace document with the selector of the element that contains #ch_display_linkedin_icon.

If #ch_display_linkedin_icon is not being dynamically generated by JavaScript, you can simplify the code a little:

$('#ch_display_linkedin_icon').click(function() {
    $('#LinkedIn').toggle($('a.link-true.active', this).length > 0);
});