jQuery UI Tabs - Collapse content : UI Tab « jQuery « JavaScript Tutorial

JavaScript Tutorial
1. Language Basics
2. Operators
3. Statement
4. Development
5. Number Data Type
6. String
7. Function
8. Global
9. Math
10. Form
11. Array
12. Date
13. Dialogs
14. Document
15. Event
16. Location
17. Navigator
18. Screen
19. Window
20. History
21. HTML Tags
22. Style
23. DOM Node
24. Drag Drop
25. Object Oriented
26. Regular Expressions
27. XML
28. GUI Components
29. Dojo toolkit
30. jQuery
31. Animation
32. MS JScript
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript DHTML
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript Tutorial » jQuery » UI Tab 
30. 150. 2. jQuery UI Tabs - Collapse content
<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c2009 AUTHORS.txt (http://jqueryui.com/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txtlicenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Tabs - Collapse content</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.tabs.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
  $(function() {
    $("#tabs").tabs({
      collapsible: true
    });
  });
  </script>
</head>
<body>

<div class="demo">

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p><strong>Click this tab again to close the content pane.</strong></p>
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p><strong>Click this tab again to close the content pane.</strong></p>
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p><strong>Click this tab again to close the content pane.</strong></p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>

</div><!-- End demo -->

<div class="demo-description">

<p>Click the selected tab to toggle its content closed/open.  To enable this functionality, set the <code>collapsible</code> option to true.</p>

<pre><code>collapsible: true
</code></pre>

</div><!-- End demo-description -->

</body>
</html>
30. 150. UI Tab
30. 150. 1. jQuery UI Tab with list
30. 150. 2. jQuery UI Tabs - Collapse content
30. 150. 3. jQuery UI Tabs - Default functionality
30. 150. 4. jQuery UI Tabs - Open on mouseover
30. 150. 5. jQuery UI Tabs - Sortable
30. 150. 6. jQuery UI Tabs - Vertical Tabs functionality
30. 150. 7. jQuery UI Tabs - Content via Ajax
30. 150. 8. Set second tab selected
30. 150. 9. Disable the first tab
30. 150. 10. Animation for tab on change event
30. 150. 11. Alert the id of the tab that was selected
30. 150. 12. Tab selected event
30. 150. 13. Enable and disable tab by click a button
30. 150. 14. Add a tab to tab panel
30. 150. 15. Remove a tab from tab panel
30. 150. 16. Rotate tabs
30. 150. 17. Destroy a tab panel
30. 150. 18. Add static html content from a file to tab panel
30. 150. 19. Load static html file to a tab panel
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.