Javascript jquery网格上的图像点击显示每个特定的内容，但只显示1个部分

你好，所以我正在尝试创建一个关于我们的页面

有一个缩略图图像网格，当您单击一个缩略图时，该缩略图的内容将显示在该缩略图集的周围。每个缩略图都有自己独特的内容

我目前有这个工作，但当你有1个缩略图的内容，如果你点击另一个缩略图的内容也出现

我只是想一套缩略图的内容出现，而不是多个

如果这很简单，我道歉，我找不到答案

任何帮助都将不胜感激：）

看看我刚才的密码笔-

`enter code here` http://codepen.io/anon/pen/PNWXYp

---

不是最优雅的解决方案，但：

这里的问题是，您只引用单击的对象，因此它只会隐藏/显示正在单击的特定对象。为了解决这个问题，我简单地添加了一个潜在显示对象的数组，每次单击都会选中该数组，并隐藏任何已识别的对象

$(document).ready(function() {
    $('.nav-toggle').click(function() {
        var collapse_content_selector = $(this).attr('href');
        var array = ['#john', '#jane', '#agent', '#peter'];
        var i = 0;
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function() {
            if ($(this).css('display') == 'none') {
                toggle_switch.html('Show');
            } else {
                for (i; i < 5; i++) {
                    if (array[i] != collapse_content_selector) {
                        if ($(array[i]).is(':visible')) {
                            $(array[i]).hide();
                        }
                    }
                }
                toggle_switch.html('Hide');
            }
        });
    });
});

$（文档）.ready（函数（）{
$（'.nav toggle'）。单击（函数（）{
var collapse_content_selector=$（this.attr（'href'）；
var数组=['#john'、'#jane'、'#agent'、'#peter']；
var i=0；
变量切换开关=$（此）；
$（折叠内容选择器）。切换（函数（）{
if（$（this.css（'display'）=='none'）{
toggle_switch.html（'Show'）；
}否则{
对于（i；i<5；i++）{
if（数组[i]！=折叠内容选择器）{
如果（$（数组[i]）是（':visible'））{
$（数组[i]）.hide（）；
}
}
}
toggle_switch.html（'Hide'）；
}
});
});
});