Javascript 单击其他扰流板时关闭扰流板

我有以下扰流板代码：

<style type="text/css">
body,input
    {
    font-family:"Trebuchet ms",arial;font-size:0.9em;
    color:#333;
    }
.spoiler
    {
    border:1px solid #ddd;
    padding:3px;
    }
.spoiler .inner
    {
    border:1px solid #eee;
    padding:3px;margin:3px;
    }
    </style>
    <script type="text/javascript">
function showSpoiler(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }
    </script>

<div class="spoiler">
    <img onclick="showSpoiler(this);" src="http://i.imgur.com/AZrcfcR.png" />
    <div class="inner" style="display:none;">
    This is a spoiler!
    </div>
</div>

正文，输入
{
字体系列：“投石机ms”，arial；字体大小：0.9em；
颜色：#333；
}
.扰流板
{
边框：1px实心#ddd；
填充：3倍；
}
.扰流器.内部
{
边框：1px实心#eee；
填充：3px；边距：3px；
}
功能显示扰流板（obj）
{
var inner=obj.parentNode.getElementsByTagName（“div”）[0]；
如果（inner.style.display==“无”）
inner.style.display=“”；
其他的
internal.style.display=“无”；
}
这是一个扰流器！

---

我真的不知道如何解释，但是当另一个扰流板打开（单击）时，有没有办法使扰流板关闭？

尝试在显示之前隐藏所有扰流板

试试这个：

function showSpoiler(obj)
{
   var elements  = document.getElementsByClassName('spoiler');

   for(i in elements ){
     elements[i].style.display = "none";
   }

   var inner = obj.parentNode.getElementsByTagName("div")[0];   
   inner.style.display = "";
}

---

@user3142039:使用诸如Firebug之类的调试器，因为在展开/折叠这些div时会出现此错误

ele.inner未定义
。我试图用编辑的代码替换旧代码。它实际上没有打开任何扰流板，但它使它消失了。