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

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);
});