点击标签实现元素的显示与隐藏

HTML代码如下

<a style="color: red;float: left;" href="javascript:show();" id="btnhref">详情</a>
<div id="yarndet" style="display: none;">
    <br>
    <span style="float: left;text-align: initial;" >详情一</span>
    <br>
    <span style="float: left;text-align: initial;" >详情二</span>
    <br>
    <span style="float: left;text-align: initial;" >详情三</span>
    <br>
</div>

JS代码

<script>
   function hid(){
	document.getElementById("yarndet").style.display="none";
	document.getElementById("btnhref").innerHTML ="详情";
        document.getElementById("btnhref").href ="javascript:show()";
   }
		
   function show(){
        document.getElementById("yarndet").style.display="block";
        document.getElementById("btnhref").innerHTML ="隐藏";
        document.getElementById("btnhref").href ="javascript:hid()"; 
   }
</script>