-.show([밀리초]) : 목록을 보여준다.
-.hide([밀리초]) : 목록을 숨긴다.
<!-- 클릭시 show - hide, toggle 효과 테스트 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hideBtn").bind("click",function(){
$("#description").hide();
});
$("#showBtn").bind("click",function(){
$("#description").show(3000); //시간을 3초동안 준다.
});
$("#chk").bind("click",function(){
$("#description").toggle(3000);//show와 hide를 합쳐둔것.(show일때 클릭하면 hide로 감춰주고, hide면 show로 보여준다.)
});
});
</script>
</head>
<body>
녹차<br>
<div id="description">
녹차는 건강에 좋은 차입니다. <br>
저희는 보성에서 재배된 유기농 녹차를 사용합니다.
<br>
<img alt="김홍도 씨름" src="pic.jpg">
</div>
<input type="button" id="hideBtn" value="설명감추기">
<input type="button" id="showBtn" value="설명보기">
<input type="button" id="chk" value="설명보기 토글">
</body>
</html>
