Sortable Accordion Menus
Menu 1
To remove sortabilty from the menu:
$("selector").sortable("destroy");
Menu 2
A sortable menu allows the user to change the order of the headers by dragging and dropping.
Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
// $(function() { code }); executes the contained code when the DOM is finished loading
$(function()
{
$("#example").accordion( // Call the accordion method on the element with the id example
{
header: "div > h3" // Header elements are any h3 within a div
}).sortable( // Make the menu sortable
{
axis: "y", // Limit sorting to y axis
handle: "h3", // Limit sorting to clicking on h3 elements
stop: function(event, ui) // Set up the stop event
{
// IE doesn't recognize losing focus when sorting elements
// so trigger focusout handlers when sorting has stopped
// to remove the .ui-state-focus class
ui.item.children("h3").triggerHandler("focusout");
}
});
});
</script>
</head>
<body>
<div id="example">
<div>
<h3>Menu 1</h3>
<p>This is some placeholder content in a p element.</p>
</div>
<div>
<h3>Menu 2</h3>
<p>This is more placeholder content in a second p element.
It is coded directly below an h element which jQuery's
accordion method turns into the header you see above this content.
</p>
</div>
<div>
<h3>Code</h3>
<pre> *** This is what you are viewing *** </pre>
</div>
</div>
</body>
</html>