Manually adjust accordion heights by extending the jquery UI Widget factory

-Achieve accordion high consistency

"Viewport"Content="Width=device-width"/> <title>Index</title> <link href="~/content/jquery-ui.min.css"Rel="stylesheet"/> <script src="~/scripts/jquery-1.10.2.min.js"></script> <script src="~/scripts/jquery-ui.min.js"></script> <style type="Text/css">#word-Cup {width:300px; }    </style> <script type="Text/javascript">$ (function () {$ ('#word-cup'). accordion ({Event:"mouseover", Collapsible:true, Active:1, Heightstyle:'Auto'            });    }); </script>"Word-cup"> In the opening game, Brazil will be in Sao Paulo against the Croatian team. </p> the focus of today's battle is the last world champion Brazil to fight in El Salvador"uncrowned King"Dutch team.        In addition, Mexico vs. Cameroon, Chile against Australia team. </p> </div></body>
As can be seen, when the Heightstyle property is set to auto, the height of each block is the same, and is consistent with the maximum height:
-Achieve accordion height adaptive
When the Heightstyle attribute is set to content, the height varies with the contents:
$ (function () {$ ('#word-cup'). accordion ({Event:"mouseover", Collapsible:true, Active:1, Heightstyle:'content'            }); });

-Achieve accordion height manually adjustable
Now, we want to achieve a function: to let the bottom of the accordian can be dragged, thereby changing the height.
We can do this by extending the "JQuery UI Widget Factory". Widgets can be thought of as a factory or function that can be used to create all of the UI. Expand as follows:
(function ($) {$.widget ("custom.newaccordion", $.ui.accordion, {options: {resizable:true //default is True}, _create:function () {//Override constructs the _create constructor, all underlined are private functions of the widget                     This. _super ();//ensure that the default functionality of accordion is in effect                    if(! This. options.resizable) {                        return; }                     This. Headers.next (). Resizable ({handles:"s"})//Drag the bottom of each accordion to adjust the height. css ({"Margin-bottom":"5px",                            "Border-bottom":"1px dashed",                            "Overflow":"Hidden"                    }); }, _destroy:function () {//Remove extended function to revert to previous state                     This. _super (); if(! This. options.resizable) {                        return; }                     This. Headers.next (). Resizable ("Destroy"). css ({"Margin-bottom":"2px",                            "Border-bottom":"1px solid",                            "Overflow":""                    });        },            }); }) (jQuery);

Extension methods for calling widgets:
$ (' #word-cup '). Newaccordion ({});
Accordion has the features given by the extension method, such as the bottom dashed line:
You can also adjust the height by dragging the bottom of the accordion:
-Summary
By extending the jquery UI Widget Factory, you can add properties or behaviors to the various UI of jquery.
Resources:
Extending the JQuery UI Accordion