SOURCE

var collPlane = {
  checkList1: [{isactive: false},{isactive: false},{isactive: false}],
  checkList2: [{isactive: false},{isactive: false},{isactive: false}],
  collDoms: document.getElementsByClassName("collapseset"),
  checkCol: function(index,disable,num) {
    if(disable) {
    	return;
  	}
    var checkFlags;
		if(num === 1) {
      checkFlags = this.checkList2;
      this.closeOpenCol(checkFlags,num,index);
    } else {
      checkFlags = this.checkList1;
    }
  	if(checkFlags[index].isactive) {
    	this.collDoms[num].getElementsByClassName("collapse")[index].setAttribute("class","collapse");
  	} else {
    	this.collDoms[num].getElementsByClassName("collapse")[index].setAttribute("class","collapse active");
  	}
  	checkFlags[index].isactive = !checkFlags[index].isactive;
  },
  closeOpenCol: function(checkFlags,num,index) {
  	for(var i=0;i < checkFlags.length;i++) {
    	if((i != index) && checkFlags[i].isactive) {
      	checkFlags[i].isactive = false;
    		this.collDoms[num].getElementsByClassName("collapse")[i].setAttribute("class","collapse");
      	break;
  	  }
  	}
	}
};
function checkIt(index,disable,num) {
  collPlane.checkCol(index,disable,num);
}

<h3>1.正常展开</h3>
<div class="collapseset">
  <div class="collapse">
    <header onclick="checkIt(0,false,0)"><span></span>
      杨过</header>
    <article>杨过，名过，字改之，是金庸武侠小说《神雕侠侣》[1]  中的主人公，前作《射雕英雄传》中杨康与穆念慈之子，西毒欧阳锋的义子。名字为郭靖、黄蓉所取，取“有过则改之”之意。</article>
  </div>
  <div class="collapse">
    <header onclick="checkIt(1,false,0)"><span></span>
      小龙女</header>
    <article>小龙女，是金庸小说《神雕侠侣》的女主角，金庸笔下广受读者喜爱的女角之一。容貌秀美若仙、清丽绝俗。性格宽容恬淡、天真可爱。武功轻灵飘逸，于婀娜妩媚中击敌制胜。</article>
  </div>
  <div class="collapse">
    <header onclick="checkIt(2,false,0)"><span></span>
      黄药师</header>
    <article>黄药师，外号“东邪”，天下“五绝”之一，是金庸武侠小说《射雕英雄传》和《神雕侠侣》中的角色。是黄蓉之父，对其妻冯氏（小字阿衡）一往情深。。  </article>
  </div>
</div>
<h3>2.一次展开一个，和disable</h3>
<div class="collapseset">
  <div class="collapse">
    <header onclick="checkIt(0,false,1)"><span></span>
      杨过</header>
    <article>杨过，名过，字改之，是金庸武侠小说《神雕侠侣》[1]  中的主人公，前作《射雕英雄传》中杨康与穆念慈之子，西毒欧阳锋的义子。名字为郭靖、黄蓉所取，取“有过则改之”之意。</article>
  </div>
  <div class="collapse disable">
    <header onclick="checkIt(1,true,1)"><span></span>
      小龙女</header>
    <article>小龙女，是金庸小说《神雕侠侣》的女主角，金庸笔下广受读者喜爱的女角之一。容貌秀美若仙、清丽绝俗。性格宽容恬淡、天真可爱。武功轻灵飘逸，于婀娜妩媚中击敌制胜。</article>
  </div>
  <div class="collapse">
    <header onclick="checkIt(2,false,1)"><span></span>
      黄药师</header>
    <article>黄药师，外号“东邪”，天下“五绝”之一，是金庸武侠小说《射雕英雄传》和《神雕侠侣》中的角色。是黄蓉之父，对其妻冯氏（小字阿衡）一往情深。。  </article>
  </div>
</div>

.collapseset {
  width:800px;
  min-height:100px;
  display: flex;
  flex-direction:column;
}

.collapseset .collapse {
  margin-bottom:5px;
}

.collapseset .collapse header {
  border:solid 1px #999;
  width:100%;
  height:40px;
  line-height:40px;
  padding-left:15px;
  background:#e6e6e6;
  box-sizing:border-box;
  cursor:pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  color:#666;
}

.collapseset .collapse.active header {
  border-bottom:none;
  border-radius: 4px 4px 0 0;
  color:#1a1a1a;
}
.collapseset .collapse header span  {
  border:solid 3px #999;
  border-top:none;
  border-left:none;
  margin-right:15px;
  display:inline-block;
  height:8px;
  width:8px;
  transform: rotate(-45deg);
  transition: transform 0.2s;
}
.collapseset .collapse.active header span  {
  border-color:#1a1a1a;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.collapseset .collapse article {
  width:100%;
  border:solid 1px #999;
  border-top:none;
  box-sizing:border-box;
  padding:0px;
  visibility: hidden;
  border-radius: 0 0 4px 4px;
  max-height: 0px;
  opacity:0;
  //transition:max-height 0.5s ease-out,opacity 0.5s ease-out;
}
.collapseset .collapse.active article {
  visibility: visible;
  padding:10px;
  opacity:1;
  max-height:1000px;
  transition:max-height 1s ease-out,opacity 0.5s ease-out;
}
.collapseset .collapse.active {
    box-shadow: 0px 0px 2px;
  	border-radius: 4px;
}
.collapseset .collapse.disable header {
  color:#1a1a1a;
  opacity: 0.5;
  cursor: not-allowed;
}