jquery accordion

-- JQuery 2012. 7. 20. 12:48
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

asp.net ajaxtoolkit에서 사용하는 accordion보다 손쉽게 적용이 가능해서 인상 깊다.

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Insert title here</title>
 
 <!-- css -->
 <link type="text/css" href="jquery/css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
 <!--/css -->
 
 <!-- jquery -->
 <script type="text/javascript" src="jquery/js/jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="jquery/js/jquery-ui-1.8.21.custom.min.js"></script>
 <!--/jquery -->
 
 <!-- javascript -->
 <script type="text/javascript">
 $(function() {
  $("#accordion").accordion({ header: "h3" }); 
 });

 </script>
 <!--/javascript -->
</head>
<body>

<!-- Accordion -->
<div id="accordion">
   <div>
    <h3><a href="#">First</a></h3>
    <div>Accordion body1</div>
   </div>
   <div>
    <h3><a href="#">Second</a></h3>
    <div>Accordion body2</div>
   </div>
   <div>
    <h3><a href="#">Third</a></h3>
    <div>Accordion body3</div>
   </div>
  </div> 
<!--/Accordion -->
 
</body>
</html>

'-- JQuery' 카테고리의 다른 글

JQuery Useful Attribute Methods  (0) 2012.07.20
jquery tabs  (0) 2012.07.20
jquery UI를 위한 기본골격  (0) 2012.07.20
closure  (0) 2012.07.18
ready와 객체생성  (0) 2012.07.18
posted by 어린왕자악꿍