j-Query 로 내용 아코디언 형식으로 보였다 숨겼다 하기

노드js·자바스크립트

by 김일국 2010. 10. 4. 15:22

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="http://jquery.codex.kr/jquery/jquery.js"></script>
  <script type="text/javascript">
   $(document).ready(function(){
   $(".accordion h3:first").addClass("active");
   $(".accordion p:not(:first)").hide();
   $(".accordion h3").click(function(){
    $(this).next("p").slideToggle("fast")
    .siblings("p:visible").slideUp("fast");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
   });
  });
</script>
<style type="text/css">
  .accordion {
   width: 480px;
   border-bottom: solid 1px #c4c4c4;
  }
  .accordion h3 {
   background: #e9e7e7 url(arrow-accod.gif) no-repeat right -51px;
   padding: 7px 15px;
   margin: 0;
   border: solid 1px #c4c4c4;
   border-bottom: none;
   cursor: pointer;
  }
  .accordion h3:hover {
   background-color: #e3e2e2;
  }
  .accordion h3.active {
   background-position: right 8px;
  }
  .accordion p {
   background: #f7f7f7;
   margin: 0;
   padding: 10px 15px 20px;
   border-left: solid 1px #c4c4c4;
   border-right: solid 1px #c4c4c4;
  }
</style>
</head>
<body>
<div class="accordion">
  <h3>글제목1</h3>
  <p>
  글내용1<br />
  글내용1
  </p>
  <h3>글제목2</h3>
  <p>
  글내용2<br />
  글내용2<br />
  글내용2<br />
  글내용2<br />
  글내용2
  </p>
  <h3>글제목3</h3>
  <p>
  글내용3<br />
  글내용3<br />
  글내용3
  </p>
</div>
</body>
</html>

아코디언.html

0.0MB

'노드js·자바스크립트' 카테고리의 다른 글

다음 API 로 본인 블로그 최신글 뽑아오는 코드 (0)	2014.02.26
j-query 유효성검사 (0)	2012.05.23
j-query 시작 (0)	2012.05.14
현재창 영역프린트 및 팝업창으로 영역프린트 하는 방법 (0)	2010.10.06
자바스크립트시작 (0)	2010.04.22