js点击一个div控制另一个div内容的显示与隐藏同时小图标也要切换状态，页面有好几个这样的div。

左边图是我要的效果，右边图只是我随便写的一个demo，哪位大神能把效果实现啊。效果：内容默认显示，点击标题栏内容隐藏的同时箭头状态也要切换。用js写。不能用插件

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.menu {width:300px; height:48px; line-height:48px; text-align:right; background-color:#eef}
.menu i {margin:0 4px}
.detail {width:300px; border:1px solid #ddf}
</style>
<div class="menu">显示/隐藏<i class="fa fa-edit"></i><i class="fa fa-chevron-circle-down"></i></div>
<div class="detail">
   <div>详情1行</div>
   <div>详情2行</div>
   <div>详情3行</div>
</div>
<div class="menu">显示/隐藏<i class="fa fa-edit"></i><i class="fa fa-chevron-circle-down"></i></div>
<div class="detail">
   <div>详情1行</div>
   <div>详情2行</div>
   <div>详情3行</div>
</div>
<div class="menu">显示/隐藏<i class="fa fa-edit"></i><i class="fa fa-chevron-circle-down"></i></div>
<div class="detail">
   <div>详情1行</div>
   <div>详情2行</div>
   <div>详情3行</div>
</div>
<div class="menu">显示/隐藏<i class="fa fa-edit"></i><i class="fa fa-chevron-circle-down"></i></div>
<div class="detail">
   <div>详情1行</div>
   <div>详情2行</div>
   <div>详情3行</div>
</div>
<script>
window.onload=function(){
   var menus=document.querySelectorAll("div.menu");
   var details=document.querySelectorAll("div.detail");
   for(var i=0;i<menus.length;i++){
      details[i].style.display="none";
      menus[i].id=i;
      menus[i].onclick=function(){
         if(details[this.id].style.display=="none"){
            details[this.id].style.display="block";
            this.querySelector("i:nth-of-type(2)").className="fa fa-chevron-circle-up";
         }else{
            details[this.id].style.display="none";
            this.querySelector("i:nth-of-type(2)").className="fa fa-chevron-circle-down";
         }
      }
   }
}
</script>

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/f2s4ppm84ppv2mf2qp4.html