Recently, I've been encountering some issues with toggling the visibility of elements. On a single page, there are two popups and my goal is to hide one popup if the other has a certain class applied to it.
<body class="home">
<div class="popup main"></div>
<div class="popup"></div>
</body>
To elaborate further, when .main popup exists within body.home, only this particular popup should be displayed while the other .popup element is hidden or removed entirely.
My attempted solution was:
if ($('.home').find('.main')) {
$('.home').find('.main').show();
$('.home').find('.popup').remove();
}
Unfortunately, this approach did not yield the desired results because in certain scenarios, there might exist code containing only one popup block like so:
<body class="home">
<div class="popup"></div>
</body>