Below is the current code snippet:
jQuery(document).ready(function($) {
$("ul.accordion-section-content li[id*='layers-builder'] button.add-new-widget").click(function() {
$("#available-widgets-list div:not([id*='layers-widget'])").css('display','none');
});
});
The intention here is that upon clicking a button with the "layers-builder" class, all the divs within "available-widgets-list" that do not contain the "layers-widget" class should be hidden.
However, I have encountered an issue where this behavior also includes hiding the divs nested inside the "layers-widget" div (as not all of them have "layers-widget" in their id).
As an example, consider this dummy markup:
<div id="some-id">
...
</div>
<div id="this-layers-widget-89">
<div id="hello"></div>
<div id="yes"></div>
</div>
In the scenario above, the first div with "some-id" would disappear along with all child divs within "this-layers-widget-89".
Any thoughts on how to ensure that the content within the div containing "layers-widget" remains visible?