可折叠的Div无法正常工作-我做错了什么？

Question

我正在尝试使用HTML / JS制作可折叠的div。下面是我的代码。它对我的页面没有任何影响。怎么会来？

免责声明：我是Java语言的新手，我很讨厌它，所以我怀疑我没有正确地连接东西。这里需要onclick事件吗？

JSFiddle is here (with CSS).

function showhide() {
  var coll = document.getElementsByClassName("content");
  var i;

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
}

<div class="row">
  <button class="collapsible" onclick="showhide()">Collapsible</button>
  <div class="content">
    <p>
      This data should be collapsible.
    </p>
  </div>
</div>