-- JQuery

jquery accordion

어린왕자악꿍 2012. 7. 20. 12:48

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>