手风琴效果(自用)

所谓手风琴效果既:点击按钮弹出指定div,同时隐藏其他所有div,再次点击则隐藏弹出的div

手风琴html

<div id="ListR">
	<div class="btn btn-default btn-lg" style="width: 100%">
		<div class="columns pull-left" style="color: black"  onclick="showL1()">事故发生的可能性(L)判定准则</div>
		<div class="columns pull-right" onclick="add('LSR','L')">添加</div>
	</div>
	<div class="tab-pane table_height" id="L1Tab" style="display: none">
		<table id="L1Table" data-mobile-responsive="true" data-height="100%" class="text-nowrap"></table>
	</div>
	
	<div class="btn btn-default btn-lg" style="width: 100%">
		<div class="columns pull-left" style="color: black" onclick="showS()">时间后果严重性(S)判定准则</div>
		<div class="columns pull-right" onclick="add('LSR','S')">添加</div>
	</div>
	<div class="tab-pane table_height" id="STab" style="display: none">
		<table id="STable" data-mobile-responsive="true" data-height="100%" class="text-nowrap"></table>
	</div>
	
	<div class="btn btn-default btn-lg" style="width: 100%">
		<div class="columns pull-left" style="color: black" onclick="showR()">风险等级判定(R)及控制措施</div>
		<div class="columns pull-right" onclick="add('LSR','R')">添加</div>
	</div>
	<div class="tab-pane table_height" id="RTab" style="display: none">
		<table id="RTable" data-mobile-responsive="true" data-height="100%" class="text-nowrap"></table>
	</div>
</div>

手风琴js

let a=document.getElementById("L1Tab").style.display;
	if(a=='none'){
		document.getElementById("L1Tab").style.display='block'
		document.getElementById("STab").style.display='none'
		document.getElementById("RTab").style.display='none'
	}else{
		document.getElementById("L1Tab").style.display='none'
	}