Setting CSS attributes on Change using jQuery
- by Nick B
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
