設置塊級元素的隱藏和顯示

設置塊級元素的隱藏和顯示

Html

<div id="sel_1" class="col-xs-12 col-sm-12" style="visibility: hidden;height: 0px;">				
	<label class="form-label col-xs-8 col-sm-6">id</label>						
	<input id="type"  type="password" class="input-text" autocomplete="off"						
</div>
<a href="javascript:void(0);" οnclick="hiden()" class="btn btn-primary radius">點擊隱藏/顯示</a>

JavaScript

<script>
			function hiden() {
				if(document.getElementById('sel_1').style.visibility == "hidden") {
					document.getElementById('sel_1').style.visibility = 'visible';
					document.getElementById('sel_1').style.height = '20%';
				} else {
					document.getElementById('sel_1').style.visibility = 'hidden';
					setTimeout(hiden_2, 1000);//設置延時

				}

			}

			function hiden_2() {
				document.getElementById('sel_1').style.height = '0';
			}
		</script>