기본적인 jQuery 파일을 통해 기본 글의 구조를 살펴 본다.
소스
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>아코디언 패널</title>
<script type="text/javascript" src="http://kaksihost.cafe24.com/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$(this).siblings("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}
});
});
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
dl {
width: 100%;
margin-top: 50px;
margin-right: auto;
margin-bottom: 50px;
margin-left: auto;
}
dl dt {
background-color: #7cadb6;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFF;
cursor: pointer;
}
dl dd {
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #7cadb6;
border-right-color: #7cadb6;
border-bottom-color: #7cadb6;
border-left-color: #7cadb6;
height: 300px;
}
</style>
</head>
<body>
<div id="container">
<dl>
<dt><p>텍스트 1</p></dt>
<dd><p>텍스트 1 텍스트의 모든 내용을 보여줍니다.</p></dd>
<dt><p>텍스트2</p></dt>
<dd><p>텍스트2 두번째 텍스트의 내용을 보여줍니다.</p></dd>
<dt><p>텍스트3</p></dt>
<dd><p>텍스트3 세번째 텍스트의 내용을 보여줍니다.</p></dd>
</dl>
</div>
</body>
</html>
해설
<!-- html 5 로 만들었습니다. -->
<!doctype html>
<html>
<head>
<!-- 글자 인코딩 형식은 유니코드로 작업했어요 -->
<meta charset="UTF-8">
<title>아코디언 패널</title>
<!-- jquery 버전은 최신 버전으로 원격으로 불러오기를 합니다. -->
<script type="text/javascript" src="http://kaksihost.cafe24.com/jquery/jquery-1.8.0.min.js"></script>
<!-- 실제 사용할 스크립트 내용을 적습니다. -->
<script type="text/javascript">
$(function(){
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$(this).siblings("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}
});
});
</script>
<!-- 스타일 내용을 적습니다. -->
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
dl {
width: 100%;
margin-top: 50px;
margin-right: auto;
margin-bottom: 50px;
margin-left: auto;
}
dl dt {
background-color: #7cadb6;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFF;
cursor: pointer;
}
dl dd {
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #7cadb6;
border-right-color: #7cadb6;
border-bottom-color: #7cadb6;
border-left-color: #7cadb6;
height: 300px;
}
</style>
</head>
<body>
<!-- 내용을 적어줍니다. -->
<div id="container">
<dl>
<dt><p>텍스트 1</p></dt>
<dd><p>텍스트 1 텍스트의 모든 내용을 보여줍니다.</p></dd>
<dt><p>텍스트2</p></dt>
<dd><p>텍스트2 두번째 텍스트의 내용을 보여줍니다.</p></dd>
<dt><p>텍스트3</p></dt>
<dd><p>텍스트3 세번째 텍스트의 내용을 보여줍니다.</p></dd>
</dl>
</div>
</body>
</html>
텍스트 1
텍스트 1 텍스트의 모든 내용을 보여줍니다.
텍스트2
텍스트2 두번째 텍스트의 내용을 보여줍니다.
텍스트3
텍스트3 세번째 텍스트의 내용을 보여줍니다.
