I want
to change css visibility and display attributes using jQuery on click when the state of another div's visibility attribute changes. (Many apologies for the obfuscated markup, but needing
to manipulate someone else's construction):
There are four instances of [data-label="Checkbox"] [data-label="Checked"] in this page. I want
to set [data-label="trash"] and [data-label="Sort Options"]
to visibility: visible; display: [empty value] when any of the [data-label="Checkbox"] [data-label="Checked"]'s attributes changes
to 'visibility', 'visible'.
Else, if none of [data-label="Checkbox"] [data-label="Checked"]'s have the attribute 'visibility', 'visible', I want
to set [data-label="trash"] and [data-label="Sort Options"] back
to their initial states: display: none; visibility: hidden;.
Here's the markup:
<div data-label="Sort Options" style="display: none; visibility: hidden;">
<div data-label="trash" style="display: none; visibility: hidden;"></div>
</div>
<div data-label="Checkbox">
<div data-label="Unchecked"></div>
<div data-label="Checked" style="display: none; visibility: hidden;"></div>
</div>
Here is what I have tried unsuccessfully:
$('[data-label="Checkbox"]').click(function() {
if ('[data-label="Checkbox"] [data-label="Checked"]').css('visibility', 'visible') {
$('[data-label="trash"], [data-label="Sort Options"]').css({'display': '', 'visibility': 'visible'});
} else {
$('[data-label="trash"], [data-label="Sort Options"]').css({'display': 'none', 'visibility': 'hidden'});
}
});
Any help would be greatly appreciated! Thanks
