show hide

by Uriel Zarnihchi

HTML

<button type="button" onclick="toggle()">Draw</button>
	<br>
	<div class="testDiv hide"></div>
        
        <script>
		function toggle () {
			if ($(".testDiv").hasClass("hide") == true) {
				$(".testDiv").removeClass("hide") ; 
			}
			else  {
				$(".testDiv").addClass("hide") ;
			}
		}
	</script>

CSS

.testDiv {
			display:block ;
			background-color : blue  ; 
			overflow : hidden ; 
			height : 400px ; 
			width : 500px ; 
			opacity : 1 ;
			-webkit-transition: width 2s, height 2s,opacity 2s,  -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
			transition: width 2s, height 2s , opacity 2s,transform 2s;
			
		}
		.testDiv.hide {
			height : 0px ;
			width : 0px ; 
			opacity: 0 ;
		}