Dev/jQuery

[jQuery] jQuery toggle사용(접기/펴기)

쇼크리더 2009. 11. 30. 14:27
반응형
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
	<link href="Css/cssJMBae.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
		.hidden
		{
			display: none;
		}
		.bold
		{
			font-weight: bold;
		}
		.DivCss
		{
			background-color: #FFFFCC; border: thin dotted #000000; padding: 2px; margin: 0px; width: 200px;
		}
	</style>
	<script src="Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
	<script language="javascript" type="text/javascript">
		$(document).ready(function () {
			//코드작성
		});
		$(document).ready(function () {
			var toggleStyleSwitcher = function () {
				$('#div1').addClass('bold');
			};
			$('#txt1').addClass('hidden');

			$('#Button1').click(function (event) {
				$('#txt1').toggleClass('hidden');
				//				document.writeln(this.id);
			});

			$('div:contains("내용 접기")').click(toggleStyleSwitcher);
		});
	</script>
</head>
<body>
	<div id="div1">내용 접기 <img src="Images/dpimg_wnd_hide.png" id="Button1" align="bottom" /></div> 
	<div id="txt1"  class="DivCss">MSDN 라이브러리는 Microsoft 도구, 제품 및 기술을 사용하는 개발자에게 꼭 필요한 리소스입니다. MSDN 라이브러리는 샘플 코드, 문서, 기술 자료, 참조 가이드 등 기술 프로그래밍에 대한 방대한 정보를 제공합니다.

새로운 기능! 일부 MSDN Library 페이지에서 새로운 커뮤니티 콘텐츠 섹션 기능을 사용할 수 있습니다. 개발자 커뮤니티에 참여하여 해당 섹션을 위한 코드 예제, 유용한 방법, 최선의 방법 및 기타 유용한 정보를 제공할 수 있습니다. 자세한 내용은MSDN 커뮤니티 콘텐츠 를 참조하십시오.

</div>
</body>
</html>


실행 화면은 아래와 같이..
반응형