<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Accordion - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <script src="../../jquery-1.6.2.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.accordion.js"></script> <link rel="stylesheet" href="../demos.css"> <script> $(function() { $( "#accordion" ).accordion(); }); </script> </head> <body> <div class="demo"> <div id="accordion"> <h3><a href="#">Section 1</a></h3> <div> <p> </p> </div> <h3><a href="#">Section 2</a></h3> <div> <p> </p> </div> <h3><a href="#">Section 3</a></h3> <div> <p> </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3><a href="#">Section 4</a></h3> <div> <p> </p> </div> </div> </div><!-- End demo --> <div class="demo-description"> <p> Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover. </p> <p> The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript. </p> </div><!-- End demo-description --> </body> </html>
<script> $(document).ready(function() { $("#accordion").accordion({ active:false, collapsable: true }); }); </script>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)