|
|
| Line 1: |
Line 1: |
| - | <html> | + | <html> |
| - | <meta charset="utf-8" /> | + | <head> |
| - | <title>jQuery UI Accordion - Default functionality</title> | + | <style> |
| - | <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
| + | * { margin:0; padding:0; } /* a simple reset */ |
| - | <script src="http://code.jquery.com/jquery-1.9.1.js"></script> | + | .head, li, h2 { margin-bottom:15px; } |
| - | <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
| + | .head { display:block; } |
| - | <link rel="stylesheet" href="/resources/demos/style.css" />
| + | .content { display:none; } |
| | + | </style> |
| | + | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> |
| | <script> | | <script> |
| - | $(function() {
| + | $(document).ready(function(){ |
| - | $( "#accordion" ).accordion();
| + | $('.head').click(function(e){ |
| - | });
| + | e.preventDefault(); |
| | + | $(this).closest('li').find('.content').slideToggle(); |
| | + | }); |
| | + | }); |
| | </script> | | </script> |
| | </head> | | </head> |
| | <body> | | <body> |
| - |
| + | <ul> |
| - | <div id="accordion">
| + | <li> |
| - | <h3>Section 1</h3> | + | <a href='#' class='head'>Heading 1</a> |
| - | <div>
| + | <div class='content'> Content 1 |
| - | <p>
| + | </div> |
| - | Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
| + | </li> |
| - | ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
| + | <li> |
| - | amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
| + | <a href='#' class='head'>Heading 2</a> |
| - | odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
| + | <div class='content'> Content 2< /div> |
| - | </p>
| + | </li> |
| - | </div>
| + | <li> |
| - | <h3>Section 2</h3>
| + | <a href='#' class='head'>Heading 3</a> |
| - | <div>
| + | <div class='content'>Content 3</div> |
| - | <p> | + | </li> |
| - | Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
| + | </ul> |
| - | purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
| + | </body> |
| - | velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
| + | |
| - | suscipit faucibus urna.
| + | |
| - | </p> | + | |
| - | </div>
| + | |
| - | <h3>Section 3</h3>
| + | |
| - | | + | |
| - | <p>
| + | |
| - | Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
| + | |
| - | Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
| + | |
| - | ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
| + | |
| - | lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
| + | |
| - | </p> | + | |
| - | <ul> | + | |
| - | <li>List item one</li>
| + | |
| - | <li>List item two</li> | + | |
| - | <li>List item three</li> | + | |
| - | </ul>
| + | |
| - | </div>
| + | |
| - | <h3>Section 4</h3>
| + | |
| - | <div>
| + | |
| - | <p>
| + | |
| - | Cras dictum. Pellentesque habitant morbi tristique senectus et netus
| + | |
| - | et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
| + | |
| - | faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
| + | |
| - | mauris vel est.
| + | |
| - | </p> | + | |
| - | <p>
| + | |
| - | Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
| + | |
| - | Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
| + | |
| - | inceptos himenaeos.
| + | |
| - | </p>
| + | |
| - | </div> | + | |
| - | </div> | + | |
| | </html> | | </html> |
"
