JavaScript Tutorial/jQuery/UI Accordion

Содержание

1 30. accordion panel open/close event
- 1.1 <a class="heading" href="#">Section 1</a>
- 1.2 <a class="heading" href="#">Section 2</a>
- 1.3 <a class="heading" id="header3" href="#">Section 3</a>
- 1.4 <a class="heading" href="#">Section 4</a>
2 30. Accordion Resizer
- 2.1 Resize the outer container:
- 2.2 <a href="#">Section 1</a>
- 2.3 <a href="#">Section 2</a>
- 2.4 <a href="#">Section 3</a>
- 2.5 <a href="#">Section 4</a>
3 30. alwaysOpen:false, autoHeight:false
- 3.1 <a href="#">Section 1</a>
- 3.2 <a href="#">Section 2</a>
- 3.3 <a id="header3" href="#">Section 3</a>
- 3.4 <a href="#">Section 4</a>
4 30. Call accordion() function to make an accordion panel
- 4.1 <a href="#">Section 1</a>
- 4.2 <a href="#">Section 2</a>
- 4.3 <a href="#">Section 3</a>
- 4.4 <a href="#">Section 4</a>
5 30. Create option array and pass to create accordion panel
- 5.1 <a href="#">Section 1</a>
- 5.2 <a href="#">Section 2</a>
- 5.3 <a href="#">Section 3</a>
- 5.4 <a href="#">Section 4</a>
6 30. Customize the header icons
- 6.1 <a href="#">Section 1</a>
- 6.2 <a href="#">Section 2</a>
- 6.3 <a href="#">Section 3</a>
- 6.4 <a href="#">Section 4</a>
7 30. Destroy the accordion panel
- 7.1 <a href="#">Section 1</a>
- 7.2 <a href="#">Section 2</a>
- 7.3 <a id="header3" href="#">Section 3</a>
- 7.4 <a href="#">Section 4</a>
8 30. Enable or disable accordion panel
- 8.1 <a href="#">Section 1</a>
- 8.2 <a href="#">Section 2</a>
- 8.3 <a id="header3" href="#">Section 3</a>
- 8.4 <a href="#">Section 4</a>
9 30. fillSpace: true
- 9.1 <a href="#">Section 1</a>
- 9.2 <a href="#">Section 2</a>
- 9.3 <a id="header3" href="#">Section 3</a>
- 9.4 <a href="#">Section 4</a>
10 30. jQuery UI Accordion - Collapse content
- 10.1 <a href="#">Section 1</a>
- 10.2 <a href="#">Section 2</a>
- 10.3 <a href="#">Section 3</a>
- 10.4 <a href="#">Section 4</a>
11 30. jQuery UI Accordion - Default functionality
- 11.1 <a href="#">Section 1</a>
- 11.2 <a href="#">Section 2</a>
- 11.3 <a href="#">Section 3</a>
- 11.4 <a href="#">Section 4</a>
12 30. jQuery UI Accordion - Fill space
- 12.1 Resize the outer container:
- 12.2 <a href="#">Section 1</a>
- 12.3 <a href="#">Section 2</a>
- 12.4 <a href="#">Section 3</a>
- 12.5 <a href="#">Section 4</a>
13 30. jQuery UI Accordion - Open on mouseover
- 13.1 <a href="#">Section 1</a>
- 13.2 <a href="#">Section 2</a>
- 13.3 <a href="#">Section 3</a>
- 13.4 <a href="#">Section 4</a>
14 30. Set active accordion panel
- 14.1 <a class="heading" href="#">Section 1</a>
- 14.2 <a class="heading" href="#">Section 2</a>
- 14.3 <a class="heading" id="header3" href="#">Section 3</a>
- 14.4 <a class="heading" href="#">Section 4</a>
15 30. Set active panel by class name
- 15.1 A
- 15.2 B
- 15.3 C
- 15.4 D
16 30. Set active panel for accordion
- 16.1 <a href="#">Section 1</a>
- 16.2 <a href="#">Section 2</a>
- 16.3 <a id="header3" href="#">Section 3</a>
- 16.4 <a href="#">Section 4</a>
17 30. Setting autoHeight: false allows to accordion panels to keep their native height.
- 17.1 <a href="">Section 1</a>
- 17.2 <a href="#">Section 2</a>
- 17.3 <a href="#">Section 3</a>
18 30. This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size
19 30. Use h4 as header
- 19.1 A
- 19.2 B
- 19.3 C
- 19.4 D
20 30. Use mouse over event to trigger
- 20.1 A
- 20.2 B
- 20.3 C
- 20.4 D

30. accordion panel open/close event

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title></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.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
     
     var accOpts = {
       
       //add change event callback
       change: function(e, ui) {
         alert($(ui.newContent).attr("id") + " was opened, " + $(ui.oldContent).attr("id") + " was closed");
       }    
     };
     
     $("#myAccordion").accordion(accOpts);
   });
 </script>

</head> <body>

<a class="heading" href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a class="heading" href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a class="heading" id="header3" href="#">Section 3</a>

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.

List item one
List item two
List item three

<a class="heading" href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</body> </html></source>

30. Accordion Resizer

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Accordion - Fill space</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.resizable.js"></script>
 <script type="text/javascript" src="js/ui/ui.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#accordion").accordion({
     fillSpace: true
   });
 });
 $(function() {
   $("#accordionResizer").resizable({
     resize: function() {
       $("#accordion").accordion("resize");
     },
     minHeight: 140
   });
 });
 </script>

</head> <body>

Resize the outer container:

<a href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a href="#">Section 3</a>

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.

List item one
List item two
List item three

<a href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

I"m another panel

Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space. To fill the vertical space allocated by its container, set the boolean fillSpace option to true, and the script will automatically set the dimensions of the accordion to the height of its parent container. The accordion will also resize with its container if the container is resizable.

</body> </html></source>

30. alwaysOpen:false, autoHeight:false

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title></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.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
   
     //configure accordion
   var accOpts = {
     event:"mouseover",
     active:"#header3",
     alwaysOpen:false,
     autoHeight:false
   };
     
   //turn specified element into an accordion
     $("#myAccordion").accordion(accOpts);      
   
   });
 </script>

</head> <body>

<a href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a id="header3" href="#">Section 3</a>

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.

List item one
List item two
List item three

<a href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</body> </html></source>

30. Call accordion() function to make an accordion panel

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title></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.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
   
     //set the event property
   var accOpts = {
     event:"mouseover"
   }
     
   //turn specified element into an accordion
     $("#myAccordion").accordion(accOpts);      
   
   });
 </script>

</head> <body>

<a href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a href="#">Section 3</a>

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.

List item one
List item two
List item three

<a href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</body> </html></source>

30. Create option array and pass to create accordion panel

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title></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.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
   
     //set the event property
   var accOpts = {
     event:"mouseover"
   }
     
   //turn specified element into an accordion
     $("#myAccordion").accordion(accOpts);      
   
   });
 </script>

</head> <body>

<a href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a href="#">Section 3</a>

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.

List item one
List item two
List item three

<a href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</body> </html></source>

30. Customize the header icons

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Accordion - Customize icons</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.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#accordion").accordion({
     icons: {
         header: "ui-icon-circle-arrow-e",
          headerSelected: "ui-icon-circle-arrow-s"
     }
   });
 });
 </script>

</head> <body>

<a href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a href="#">Section 3</a>

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.

List item one
List item two
List item three

<a href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Customize the header icons with the icons option, which accepts classes for the header"s default and selected (open) state. Use any class from the UI CSS framework, or create custom classes with background images.

</body> </html></source>

30. Destroy the accordion panel

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title></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.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
   
     //turn specified element into an accordion
     $("#myAccordion").accordion();
   
   //attach click hander to button
   $("#accordionKiller").click(function() {
     
     //destroy the accordion
     $("#myAccordion").accordion("destroy");
     }); 
   });
 </script>

</head> <body> <button id="accordionKiller">Kill it!</button>

<a href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a id="header3" href="#">Section 3</a>

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.

List item one
List item two
List item three

<a href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</body> </html></source>

30. Enable or disable accordion panel

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title></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.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
   
     //turn specified element into an accordion
     $("#myAccordion").accordion();
   
   //add click handler for enable button
   $("#enable").click(function() {
     
     //enable the accordion
     $("#myAccordion").accordion("enable");
   });
   
   //add click handler for disable button
   $("#disable").click(function() {
   
     //disable the accordion
     $("#myAccordion").accordion("disable");
   });    
   });
 </script>

</head> <body> <button id="enable">Enable!</button><button id="disable">Disable!</button>

<a href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a id="header3" href="#">Section 3</a>

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.

List item one
List item two
List item three

<a href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</body> </html></source>

30. fillSpace: true

   <source lang="javascript">

 <title></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.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
   
     //configure accordion
   var accOpts = {
     event:"mouseover",
     active:"#header3",
     alwaysOpen:false,
     fillSpace: true,
     autoHeight:false
   };
     
   //turn specified element into an accordion
     $("#myAccordion").accordion(accOpts);      
   
   });
 </script>

</head> <body>

<a href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a id="header3" href="#">Section 3</a>

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.

List item one
List item two
List item three

<a href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</body> </html></source>

30. jQuery UI Accordion - Collapse content

   <source lang="javascript">

<!doctype html>

 <title>jQuery UI Accordion - 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.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#accordion").accordion({
     collapsible: true
   });
 });
 </script>

</head> <body>

<a href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a href="#">Section 3</a>

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.

List item one
List item two
List item three

<a href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the collapsible option to true. Click on the currently open section to collapse its content pane.

</body> </html></source>

30. jQuery UI Accordion - Default functionality

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Accordion - Default functionality</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.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#accordion").accordion();
 });
 </script>

</head> <body>

<a href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a href="#">Section 3</a>

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.

List item one
List item two
List item three

<a href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.

The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript.

</body> </html></source>

30. jQuery UI Accordion - Fill space

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Accordion - Fill space</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.resizable.js"></script>
 <script type="text/javascript" src="js/ui/ui.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#accordion").accordion({
     fillSpace: true
   });
 });
 $(function() {
   $("#accordionResizer").resizable({
     resize: function() {
       $("#accordion").accordion("resize");
     },
     minHeight: 140
   });
 });
 </script>

</head> <body>

Resize the outer container:

<a href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a href="#">Section 3</a>

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.

List item one
List item two
List item three

<a href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

I"m another panel

Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space. To fill the vertical space allocated by its container, set the boolean fillSpace option to true, and the script will automatically set the dimensions of the accordion to the height of its parent container. The accordion will also resize with its container if the container is resizable.

</body> </html></source>

30. jQuery UI Accordion - Open on mouseover

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Accordion - Open on mouseover</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.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#accordion").accordion({
     event: "mouseover"
   });
 });
 </script>

</head> <body>

<a href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a href="#">Section 3</a>

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.

List item one
List item two
List item three

<a href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Toggle sections open/closed on mouseover with the event option. The default value for event is "click."

</body> </html></source>

30. Set active accordion panel

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title></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.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
     
   //turn specified element into an accordion
     $("#myAccordion").accordion();
     $("#myAccordion").accordion("activate", 1);
   });
 </script>

</head> <body>

<a class="heading" href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a class="heading" href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a class="heading" id="header3" href="#">Section 3</a>

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.

List item one
List item two
List item three

<a class="heading" href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</body> </html></source>

30. Set active panel by class name

   <source lang="javascript">

<html>

 <head>
   <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.accordion.js"></script>
   <script type="text/javascript">

$(document).ready(

 function() {
   $("ul").accordion({
     fillSpace: true,
     event: "mouseover",
     active: "h4.tmpSelected",
     header: "h4"
   });
 }

);

   </script>
   <style type="text/css">

ul {

   list-style: none;
   margin: 0;
   padding: 15px 5px;

} ul h4, ul p {

   margin: 5px;

} li {

   background: gray;
   padding: 3px;
   width: 244px;
   margin: 1px;

}

   </style>
 </head>
 <body>

A

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum luctus rutrum orci.
B

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum luctus rutrum orci. Praesent faucibus tellus faucibus quam. Aliquam erat volutpat. Nam posuere. Aliquam erat volutpat. Etiam at lacus fermentum dui interdum pretium. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
C

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum luctus rutrum orci. Praesent faucibus tellus faucibus quam. Aliquam erat volutpat. Nam posuere.
D

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum luctus rutrum orci. Praesent faucibus tellus faucibus quam. Aliquam erat volutpat. Nam posuere.

 </body>

</html></source>

30. Set active panel for accordion

   <source lang="javascript">

 <title></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.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
   
     //configure accordion
   var accOpts = {
     event:"mouseover",
     active:"#header3",
     alwaysOpen:false,
     autoHeight:false
   };
     
   //turn specified element into an accordion
     $("#myAccordion").accordion(accOpts);      
   
   });
 </script>

</head> <body>

<a href="#">Section 1</a>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

<a href="#">Section 2</a>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

<a id="header3" href="#">Section 3</a>

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.

List item one
List item two
List item three

<a href="#">Section 4</a>

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

</body> </html></source>

30. Setting autoHeight: false allows to accordion panels to keep their native height.

   <source lang="javascript">

 <title>jQuery UI Accordion - No Auto Height</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.accordion.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#accordion").accordion({
     autoHeight: false
   });
 });
 </script>

</head> <body>

<a href="">Section 1</a>

A

<a href="#">Section 2</a>

B

<a href="#">Section 3</a>

C

</body> </html></source>

30. This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Effects - addClass Demo</title>
 <link type="text/css" href="js/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/effects.core.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
   .toggler { width: 500px; height: 200px; position: relative;}
   #button { padding: .5em 1em; text-decoration: none; }
   #effect {position: relative;  width: 240px;  padding: 1em;  font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
   #effect.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
 </style>
 <script type="text/javascript">
 $(function() {
   $("#button").click(function() {
     $("#effect").addClass("newClass", 1000, callback);
     return false;
   });
   
   function callback(){
     setTimeout(function(){
       $("#effect").removeClass("newClass");
     }, 1500);
   }
 });
 </script>

</head> <body>

     Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.

</body> </html></source>

30. Use h4 as header

   <source lang="javascript">

<html>

 <head>
   <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.accordion.js"></script>
   <script type="text/javascript">

$(document).ready(

 function() {
   $("ul").accordion({
     fillSpace: true,
     event: "mouseover",
     active: "h4.tmpSelected",
     header: "h4"
   });
 }

);

   </script>
   <style type="text/css">

ul {

   list-style: none;
   margin: 0;
   padding: 15px 5px;

} ul h4, ul p {

   margin: 5px;

} li {

   background: gray;
   padding: 3px;
   width: 244px;
   margin: 1px;

}

   </style>
 </head>
 <body>

A

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum luctus rutrum orci.
B

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum luctus rutrum orci. Praesent faucibus tellus faucibus quam. Aliquam erat volutpat. Nam posuere. Aliquam erat volutpat. Etiam at lacus fermentum dui interdum pretium. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
C

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum luctus rutrum orci. Praesent faucibus tellus faucibus quam. Aliquam erat volutpat. Nam posuere.
D

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum luctus rutrum orci. Praesent faucibus tellus faucibus quam. Aliquam erat volutpat. Nam posuere.

 </body>

</html></source>

30. Use mouse over event to trigger

   <source lang="javascript">

<html>

 <head>
   <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.accordion.js"></script>
   <script type="text/javascript">

$(document).ready(

 function() {
   $("ul").accordion({
     fillSpace: true,
     event: "mouseover",
     active: "h4.tmpSelected",
     header: "h4"
   });
 }

);

   </script>
   <style type="text/css">

ul {

   list-style: none;
   margin: 0;
   padding: 15px 5px;

} ul h4, ul p {

   margin: 5px;

} li {

   background: gray;
   padding: 3px;
   width: 244px;
   margin: 1px;

}

   </style>
 </head>
 <body>

A

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum luctus rutrum orci.
B

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum luctus rutrum orci. Praesent faucibus tellus faucibus quam. Aliquam erat volutpat. Nam posuere. Aliquam erat volutpat. Etiam at lacus fermentum dui interdum pretium. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
C

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum luctus rutrum orci. Praesent faucibus tellus faucibus quam. Aliquam erat volutpat. Nam posuere.
D

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum luctus rutrum orci. Praesent faucibus tellus faucibus quam. Aliquam erat volutpat. Nam posuere.

 </body>

</html></source>