检查div是否被切换;如果有些可见，只切换隐藏的div

Question

我在这个主题中问了一个与调用多个div相关的问题（Toggle div within a div using an image），但是我遇到了一个我似乎无法解决的新问题。在其中一个div中，有多个POPUP div。其中每个都是一个扩展文本的链接。因此，如果有三个POPUP div，并且用户单击其中一个以扩展文本，则只需扩展一个。这就是我想要的。但是，当用户单击“显示”按钮以展开的形式显示所有POPUP div时，脚本将隐藏可见的div，然后显示隐藏的div。

$(document).ready(function () {
    $('#toggleinput').click(function () {
        $('#input').find('[id^=POPUP]').toggle()
    });
    $(".img-swap_input").on('click', function () {
        if ($(this).attr("class") == "img-swap_input") {
            this.src = this.src.replace("_showall", "_hideall");
        } else {
            this.src = this.src.replace("_hideall", "_showall")
        }
        $(this).toggleClass("on");
    });

    $('#toggleresponse').click(function () {
        $('#response').find('[id^=POPUP]').toggle()
    });
    $(".img-swap_response").on('click', function () {
        if ($(this).attr("class") == "img-swap_response") {
            this.src = this.src.replace("_showall", "_hideall");
        } else {
            this.src = this.src.replace("_hideall", "_showall")
        }
        $(this).toggleClass("on");
    });
});

我想我不确定JQuery如何做到这一点。我想我可以检查每个POPUP以查看它是否被隐藏，如果是，那么它将在节目中被忽略。我可以得到类似的东西来工作。但我使用相同的代码和按钮来隐藏所有内容。所以我不知道该怎么做。