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
