Ui-accordion Accordion component based on jquery

Here's the example using the JQuery UI 1.8.6

Example effects can be seen in the JQuery Web site example.

Accordion effects organize multiple content into logical groups, and by selecting a group's title you can expand or shrink the contents of the group, using the same effect as the Tab key, or you can expand or shrink by placing the mouse over the caption.

Use this component to refer to the JQuery Script library, core, widget, accordion script library.

<script src= "Scripts/jquery-1.6.2.js" ></script>
<script src= "Scripts/jquery.ui.core.js" ></script>
<script src= "Scripts/jquery.ui.widget.js" ></script>
<script src= "Scripts/jquery.ui.accordion.js" ></script>

Of course, there are some styles to use, and the default jquery style is used here.

<link rel= "stylesheet" href= "/themes/base/jquery.ui.all.css" >

By default, you need to use a container to wrap the accordion contents. Each logical group uses a H3 element as the caption, followed by the contents of the group, with the DIV element.

<div id= "Accordion" >
        <div>first content</div>
        <div>second content</div>
</div>

Finally, the accordion is initialized in the ready event of JQuery.

<script type= "Text/javascript" >
    $ (function () {
        $ ("#accordion"). accordion ();
    });
</script>

The effect looks like this

In the initialization, you can also set the accordion properties.

Active, used to specify/get the default activation logical group, default 0.

Can be set to a Boolean type, and if set to false, logical groups are not opened by default.

can also be of type number, default is 0. Specifies the default open logical group.

Animated, the default animation effect, the default is slide.

Autoheight, if set to true, then the height of each group is set to the height of the highest group. The default is true. Otherwise, the actual height of each group shall prevail.

Collapsible whether all logical groups can shrink and default to False.

event, expand/shrink the events that are used, default to click, and use MouseOver to shrink and expand when the mouse is over the caption.

Fillspace, whether the parent element is populated, and false by default. Setting will overwrite the Autoheight settings.

Header, the default parent element is H3, and if not, you can configure the selector.

icons, the icon used on the title, defaults to:

{' Header ': ' Ui-icon-triangle-1-e ', ' headerselected ': ' Ui-icon-triangle-1-s '}