RubyGems - RubyApp - Versions diffs - 0.6.59 → 0.6.60 - Mend

RubyApp 0.6.59 → 0.6.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (870) hide show

data/lib/ruby_app/resources/elements/mobile/document/jquery-ui-1.9.2.custom/development-bundle/demos/widget/default.html ADDED

@@ -0,0 +1,178 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Widget - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+	<script src="../../jquery-1.8.3.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	.custom-colorize {
+		font-size: 20px;
+		position: relative;
+		width: 75px;
+		height: 75px;
+	}
+	.custom-colorize-changer {
+		font-size: 10px;
+		position: absolute;
+		right: 0;
+		bottom: 0;
+	}
+	</style>
+	<script>
+	$(function() {
+		// the widget definition, where "custom" is the namespace,
+		// "colorize" the widget name
+		$.widget( "custom.colorize", {
+			// default options
+			options: {
+				red: 255,
+				green: 0,
+				blue: 0,
+				// callbacks
+				change: null,
+				random: null
+			},
+			// the constructor
+			_create: function() {
+				this.element
+					// add a class for theming
+					.addClass( "custom-colorize" )
+					// prevent double click to select text
+					.disableSelection();
+				this.changer = $( "<button>", {
+					text: "change",
+					"class": "custom-colorize-changer"
+				})
+				.appendTo( this.element )
+				.button();
+				// bind click events on the changer button to the random method
+				this._on( this.changer, {
+					// _on won't call random when widget is disabled
+					click: "random"
+				});
+				this._refresh();
+			},
+			// called when created, and later when changing options
+			_refresh: function() {
+				this.element.css( "background-color", "rgb(" +
+					this.options.red +"," +
+					this.options.green + "," +
+					this.options.blue + ")"
+				);
+				// trigger a callback/event
+				this._trigger( "change" );
+			},
+			// a public method to change the color to a random value
+			// can be called directly via .colorize( "random" )
+			random: function( event ) {
+				var colors = {
+					red: Math.floor( Math.random() * 256 ),
+					green: Math.floor( Math.random() * 256 ),
+					blue: Math.floor( Math.random() * 256 )
+				};
+				// trigger an event, check if it's canceled
+				if ( this._trigger( "random", event, colors ) !== false ) {
+					this.option( colors );
+				}
+			},
+			// events bound via _on are removed automatically
+			// revert other modifications here
+			_destroy: function() {
+				// remove generated elements
+				this.changer.remove();
+				this.element
+					.removeClass( "custom-colorize" )
+					.enableSelection()
+					.css( "background-color", "transparent" );
+			},
+			// _setOptions is called with a hash of all options that are changing
+			// always refresh when changing options
+			_setOptions: function() {
+				// _super and _superApply handle keeping the right this-context
+				this._superApply( arguments );
+				this._refresh();
+			},
+			// _setOption is called for each individual option that is changing
+			_setOption: function( key, value ) {
+				// prevent invalid color values
+				if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
+					return;
+				}
+				this._super( key, value );
+			}
+		});
+		// initialize with default options
+		$( "#my-widget1" ).colorize();
+		// initialize with two customized options
+		$( "#my-widget2" ).colorize({
+			red: 60,
+			blue: 60
+		});
+		// initialize with custom green value
+		// and a random callback to allow only colors with enough green
+		$( "#my-widget3" ).colorize( {
+			green: 128,
+			random: function( event, ui ) {
+				return ui.green > 128;
+			}
+		});
+		// click to toggle enabled/disabled
+		$( "#disable" ).click(function() {
+			// use the custom selector created for each widget to find all instances
+			// all instances are toggled together, so we can check the state from the first
+			if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
+				$( ":custom-colorize" ).colorize( "enable" );
+			} else {
+				$( ":custom-colorize" ).colorize( "disable" );
+			}
+		});
+		// click to set options after initalization
+		$( "#black" ).click( function() {
+			$( ":custom-colorize" ).colorize( "option", {
+				red: 0,
+				green: 0,
+				blue: 0
+			});
+		});
+	});
+	</script>
+</head>
+<body>
+<div>
+	<div id="my-widget1">color me</div>
+	<div id="my-widget2">color me</div>
+	<div id="my-widget3">color me</div>
+	<button id="disable">Toggle disabled option</button>
+	<button id="black">Go black</button>
+</div>
+<div class="demo-description">
+<p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p>
+<p>The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works, its heavily commented</p>
+</div>
+</body>
+</html>

data/lib/ruby_app/resources/elements/mobile/document/jquery-ui-1.9.2.custom/development-bundle/demos/widget/index.html ADDED

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Widget Demo</title>
+</head>
+<body>
+<ul>
+	<li><a href="default.html">Default functionality</a></li>
+</ul>
+</body>
+</html>

data/lib/ruby_app/resources/elements/mobile/document/jquery-ui-1.9.2.custom/development-bundle/docs/accordion.html ADDED

@@ -0,0 +1,499 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI accordion documentation</title>
+	<style>
+	body {
+		font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
+	}
+	.gutter {
+		display: none;
+	}
+	</style>
+</head>
+<body>
+<script>{
+		"title":
+			"Accordion Widget",
+		"excerpt":
+			"Convert a pair of headers and content panels into an accordion.",
+		"termSlugs": {
+			"category": [
+				"widgets"
+			]
+		}
+	}</script><section class="quick-nav"><header><h2>QuickNav<a href="#entry-longdesc">Overview</a><a href="#entry-examples">Examples</a>
+</h2></header><div class="quick-nav-section">
+<h3>Options</h3>
+<div><a href="#option-active">active</a></div>
+<div><a href="#option-animate">animate</a></div>
+<div><a href="#option-collapsible">collapsible</a></div>
+<div><a href="#option-disabled">disabled</a></div>
+<div><a href="#option-event">event</a></div>
+<div><a href="#option-header">header</a></div>
+<div><a href="#option-heightStyle">heightStyle</a></div>
+<div><a href="#option-icons">icons</a></div>
+</div>
+<div class="quick-nav-section">
+<h3>Methods</h3>
+<div><a href="#method-destroy">destroy</a></div>
+<div><a href="#method-disable">disable</a></div>
+<div><a href="#method-enable">enable</a></div>
+<div><a href="#method-option">option</a></div>
+<div><a href="#method-refresh">refresh</a></div>
+<div><a href="#method-widget">widget</a></div>
+</div>
+<div class="quick-nav-section">
+<h3>Events</h3>
+<div><a href="#event-activate">activate</a></div>
+<div><a href="#event-beforeActivate">beforeActivate</a></div>
+<div><a href="#event-create">create</a></div>
+</div></section><article id="accordion1" class="entry widget"><h2 class="section-title">
+<span>Accordion Widget</span><span class="version-details">version added: 1.0</span>
+</h2>
+<div class="entry-wrapper">
+<p class="desc"><strong>Description: </strong>Convert a pair of headers and content panels into an accordion.</p>
+<section id="options"><header><h2 class="underline">Options</h2></header><div id="option-active" class="api-item first-item">
+<h3>active<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types#Integer">Integer</a></span>
+</h3>
+<div class="default">
+<strong>Default: </strong><code>0</code>
+</div>
+<div>
+				Which panel is currently open.
+			</div>
+<strong>Multiple types supported:</strong><ul>
+<li>
+<strong>Boolean</strong>: Setting <code>active</code> to <code>false</code> will collapse all panels. This requires the <a href="#option-collapsible"><code>collapsible</code></a> option to be <code>true</code>.</li>
+<li>
+<strong>Integer</strong>: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.</li>
+</ul>
+<strong>Code examples:</strong><p>Initialize the accordion with the active option specified:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion({ active: 2 });</code></div></div></td></tr></tbody></table></div>
+<p>Get or set the active option, after initialization:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">active = $( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"active"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"active"</code><code class="plain">, 2 );</code></div></div></td></tr></tbody></table></div>
+</div>
+<div id="option-animate" class="api-item">
+<h3>animate<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types#Number">Number</a> or <a href="http://api.jquery.com/Types#String">String</a> or <a href="http://api.jquery.com/Types#Object">Object</a></span>
+</h3>
+<div class="default">
+<strong>Default: </strong><code>{}</code>
+</div>
+<div>If and how to animate changing panels.</div>
+<strong>Multiple types supported:</strong><ul>
+<li>
+<strong>Boolean</strong>: A value of <code>false</code> will disable animations.</li>
+<li>
+<strong>Number</strong>: Duration in milliseconds with default easing.</li>
+<li>
+<strong>String</strong>: Name of <a href="/easings/">easing</a> to use with default duration.</li>
+<li>
+<strong>Object</strong>: Animation settings with <code>easing</code> and <code>duration</code> properties.
+					<ul>
+						<li>Can also contain a <code>down</code> property with any of the above options.</li>
+						<li>"Down" animations occur when the panel being activated has a lower index than the currently active panel.</li>
+					</ul>
+				</li>
+</ul>
+<strong>Code examples:</strong><p>Initialize the accordion with the animate option specified:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion({ animate: </code><code class="string">"bounceslide"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
+<p>Get or set the animate option, after initialization:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">animate = $( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"animate"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"animate"</code><code class="plain">, </code><code class="string">"bounceslide"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
+</div>
+<div id="option-collapsible" class="api-item">
+<h3>collapsible<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
+</h3>
+<div class="default">
+<strong>Default: </strong><code>false</code>
+</div>
+<div>Whether all the sections can be closed at once. Allows collapsing the active section.</div>
+<strong>Code examples:</strong><p>Initialize the accordion with the collapsible option specified:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion({ collapsible: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
+<p>Get or set the collapsible option, after initialization:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">collapsible = $( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"collapsible"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"collapsible"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
+</div>
+<div id="option-disabled" class="api-item">
+<h3>disabled<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
+</h3>
+<div class="default">
+<strong>Default: </strong><code>false</code>
+</div>
+<div>Disables the accordion if set to <code>true</code>.</div>
+<strong>Code examples:</strong><p>Initialize the accordion with the disabled option specified:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion({ disabled: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
+<p>Get or set the disabled option, after initialization:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">disabled = $( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
+</div>
+<div id="option-event" class="api-item">
+<h3>event<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
+</h3>
+<div class="default">
+<strong>Default: </strong><code>"click"</code>
+</div>
+<div>The event that accordion headers will react to in order to activate the associated panel. Multiple events can be specificed, separated by a space.</div>
+<strong>Code examples:</strong><p>Initialize the accordion with the event option specified:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion({ event: </code><code class="string">"mouseover"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
+<p>Get or set the event option, after initialization:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">event = $( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"event"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"event"</code><code class="plain">, </code><code class="string">"mouseover"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
+</div>
+<div id="option-header" class="api-item">
+<h3>header<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Selector">Selector</a></span>
+</h3>
+<div class="default">
+<strong>Default: </strong><code>"&gt; li &gt; :first-child,&gt; :not(li):even"</code>
+</div>
+<div>
+				<p>Selector for the header element, applied via <code>.find()</code> on the main accordion element. Content panels must be the sibling immedately after their associated headers.</p>
+			</div>
+<strong>Code examples:</strong><p>Initialize the accordion with the header option specified:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion({ header: </code><code class="string">"h3"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
+<p>Get or set the header option, after initialization:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">header = $( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"header"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"header"</code><code class="plain">, </code><code class="string">"h3"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
+</div>
+<div id="option-heightStyle" class="api-item">
+<h3>heightStyle<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
+</h3>
+<div class="default">
+<strong>Default: </strong><code>"auto"</code>
+</div>
+<div>
+				<p>Controls the height of the accordion and each panel. Possible values:</p>
+				<ul>
+					<li>
+<code>"auto"</code>: All panels will be set to the height of the tallest panel.</li>
+					<li>
+<code>"fill"</code>: Expand to the available height based on the accordion's parent height.</li>
+					<li>
+<code>"content"</code>: Each panel will be only as tall as its content.</li>
+				</ul>
+			</div>
+<strong>Code examples:</strong><p>Initialize the accordion with the heightStyle option specified:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion({ heightStyle: </code><code class="string">"fill"</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
+<p>Get or set the heightStyle option, after initialization:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">heightStyle = $( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"heightStyle"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"heightStyle"</code><code class="plain">, </code><code class="string">"fill"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
+</div>
+<div id="option-icons" class="api-item">
+<h3>icons<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Object">Object</a></span>
+</h3>
+<div class="default">
+<strong>Default: </strong><code>{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }</code>
+</div>
+<div>
+				<p>Icons to use for headers, matching an icon defined by the jQuery UI CSS Framework. Set to <code>false</code> to have no icons displayed.</p>
+				<ul>
+					<li>header (string, default: "ui-icon-triangle-1-e")</li>
+					<li>activeHeader (string, default: "ui-icon-triangle-1-s")</li>
+				</ul>
+			</div>
+<strong>Code examples:</strong><p>Initialize the accordion with the icons option specified:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion({ icons: { </code><code class="string">"header"</code><code class="plain">: </code><code class="string">"ui-icon-plus"</code><code class="plain">, </code><code class="string">"headerSelected"</code><code class="plain">: </code><code class="string">"ui-icon-minus"</code> <code class="plain">} });</code></div></div></td></tr></tbody></table></div>
+<p>Get or set the icons option, after initialization:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">icons = $( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"icons"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"icons"</code><code class="plain">, { </code><code class="string">"header"</code><code class="plain">: </code><code class="string">"ui-icon-plus"</code><code class="plain">, </code><code class="string">"headerSelected"</code><code class="plain">: </code><code class="string">"ui-icon-minus"</code> <code class="plain">} );</code></div></div></td></tr></tbody></table></div>
+</div></section><section id="methods"><header><h2 class="underline">Methods</h2></header><div id="method-destroy">
+<div class="api-item first-item">
+<h3>destroy()</h3>
+<div>
+		Removes the accordion functionality completely. This will return the element back to its pre-init state.
+	</div>
+<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
+</div>
+<div>
+<strong>Code examples:</strong><p>Invoke the destroy method:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"destroy"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
+</div>
+</div>
+<div id="method-disable">
+<div class="api-item">
+<h3>disable()</h3>
+<div>
+		Disables the accordion.
+	</div>
+<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
+</div>
+<div>
+<strong>Code examples:</strong><p>Invoke the disable method:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"disable"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
+</div>
+</div>
+<div id="method-enable">
+<div class="api-item">
+<h3>enable()</h3>
+<div>
+		Enables the accordion.
+	</div>
+<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
+</div>
+<div>
+<strong>Code examples:</strong><p>Invoke the enable method:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"enable"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
+</div>
+</div>
+<div id="method-option">
+<div class="api-item">
+<h3>option( optionName ) <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#Object">Object</a></span>
+</h3>
+<div>Gets the value currently associated with the specified <code>optionName</code>.</div>
+<ul><li>
+<div><strong>optionName</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
+</div>
+<div>The name of the option to get.</div>
+</li></ul>
+</div>
+<div>
+<strong>Code examples:</strong><p>Invoke the  method:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">isDisabled = $( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
+</div>
+<div class="api-item">
+<h3>option() <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#PlainObject">PlainObject</a></span>
+</h3>
+<div>Gets an object containing key/value pairs representing the current accordion options hash.</div>
+<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
+</div>
+<div>
+<strong>Code examples:</strong><p>Invoke the  method:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">options = $( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
+</div>
+<div class="api-item">
+<h3>option( optionName, value )</h3>
+<div>Sets the value of the accordion option associated with the specified <code>optionName</code>.</div>
+<ul>
+<li>
+<div><strong>optionName</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
+</div>
+<div>The name of the option to set.</div>
+</li>
+<li>
+<div><strong>value</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
+</div>
+<div>A value to set for the option.</div>
+</li>
+</ul>
+</div>
+<div>
+<strong>Code examples:</strong><p>Invoke the  method:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
+</div>
+<div class="api-item">
+<h3>option( options )</h3>
+<div>Sets one or more options for the accordion.</div>
+<ul><li>
+<div><strong>options</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
+</div>
+<div>A map of option-value pairs to set.</div>
+</li></ul>
+</div>
+<div>
+<strong>Code examples:</strong><p>Invoke the  method:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"option"</code><code class="plain">, { disabled: </code><code class="keyword">true</code> <code class="plain">} );</code></div></div></td></tr></tbody></table></div>
+</div>
+</div>
+<div id="method-refresh">
+<div class="api-item">
+<h3>refresh()</h3>
+<div>Recompute the height of the accordion panels. Results depend on the content and the <a href="#option-heightStyle"><code>heightStyle</code></a> option.</div>
+<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
+</div>
+<div>
+<strong>Code examples:</strong><p>Invoke the refresh method:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"refresh"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
+</div>
+</div>
+<div id="method-widget">
+<div class="api-item">
+<h3>widget() <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
+</h3>
+<div>
+		Returns a <code>jQuery</code> object containing the accordion.
+	</div>
+<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
+</div>
+<div>
+<strong>Code examples:</strong><p>Invoke the widget method:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="keyword">var</code> <code class="plain">widget = $( </code><code class="string">".selector"</code> <code class="plain">).accordion( </code><code class="string">"widget"</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
+</div>
+</div></section><section id="events"><header><h2 class="underline">Events</h2></header><div id="event-activate" class="api-item first-item">
+<h3>activate( event, ui )<span class="returns">Type: <code>accordionactivate</code></span>
+</h3>
+<div>Triggered after a panel has been activated (after animation completes). If the accordion was previously collapsed, <code>ui.oldHeader</code> and <code>ui.oldPanel</code> will be empty jQuery objects. If the accordion is collapsing, <code>ui.newHeader</code> and <code>ui.newPanel</code> will be empty jQuery objects.</div>
+<ul>
+<li>
+<div><strong>event</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
+</div>
+<div></div>
+</li>
+<li>
+<div><strong>ui</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
+</div>
+<div></div>
+<ul>
+<li>
+<div><strong>newHeader</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
+</div>
+<div>The header that was just activated.</div>
+</li>
+<li>
+<div><strong>oldHeader</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
+</div>
+<div>The header that was just deactivated.</div>
+</li>
+<li>
+<div><strong>newPanel</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
+</div>
+<div>The panel that was just activated.</div>
+</li>
+<li>
+<div><strong>oldPanel</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
+</div>
+<div>The panel that was just deactivated.</div>
+</li>
+</ul>
+</li>
+</ul>
+<div>
+<strong>Code examples:</strong><p>Initialize the accordion with the activate callback specified:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">activate: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
+<p>Bind an event listener to the accordionactivate event:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"accordionactivate"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
+</div>
+</div>
+<div id="event-beforeActivate" class="api-item">
+<h3>beforeActivate( event, ui )<span class="returns">Type: <code>accordionbeforeactivate</code></span>
+</h3>
+<div>Triggered directly before a panel is activated. Can be canceled to prevent the panel from activating. If the accordion is currently collapsed, <code>ui.oldHeader</code> and <code>ui.oldPanel</code> will be empty jQuery objects. If the accordion is collapsing, <code>ui.newHeader</code> and <code>ui.newPanel</code> will be empty jQuery objects.</div>
+<ul>
+<li>
+<div><strong>event</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
+</div>
+<div></div>
+</li>
+<li>
+<div><strong>ui</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
+</div>
+<div></div>
+<ul>
+<li>
+<div><strong>newHeader</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
+</div>
+<div>The header that is about to be activated.</div>
+</li>
+<li>
+<div><strong>oldHeader</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
+</div>
+<div>The header that is about to be deactivated.</div>
+</li>
+<li>
+<div><strong>newPanel</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
+</div>
+<div>The panel that is about to be activated.</div>
+</li>
+<li>
+<div><strong>oldPanel</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
+</div>
+<div>The panel that is about to be deactivated.</div>
+</li>
+</ul>
+</li>
+</ul>
+<div>
+<strong>Code examples:</strong><p>Initialize the accordion with the beforeActivate callback specified:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">beforeActivate: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
+<p>Bind an event listener to the accordionbeforeactivate event:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"accordionbeforeactivate"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
+</div>
+</div>
+<div id="event-create" class="api-item">
+<h3>create( event, ui )<span class="returns">Type: <code>accordioncreate</code></span>
+</h3>
+<div>Triggered when the accordion is created. If the accordion is collapsed, <code>ui.header</code> and <code>ui.panel</code> will be empty jQuery objects.</div>
+<ul>
+<li>
+<div><strong>event</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
+</div>
+<div></div>
+</li>
+<li>
+<div><strong>ui</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
+</div>
+<div></div>
+<ul>
+<li>
+<div><strong>header</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
+</div>
+<div>The active header.</div>
+</li>
+<li>
+<div><strong>panel</strong></div>
+<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
+</div>
+<div>The active panel.</div>
+</li>
+</ul>
+</li>
+</ul>
+<div>
+<strong>Code examples:</strong><p>Initialize the accordion with the create callback specified:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).accordion({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">create: </code><code class="keyword">function</code><code class="plain">( event, ui ) {}</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
+<p>Bind an event listener to the accordioncreate event:</p>
+<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).on( </code><code class="string">"accordioncreate"</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">( event, ui ) {} );</code></div></div></td></tr></tbody></table></div>
+</div>
+</div></section><div class="longdesc" id="entry-longdesc">
+<header><h2 class="underline">Overview</h2></header>
+		<p>The markup of your accordion container needs pairs of headers and content panels:</p>
+		<div class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">&lt;</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"accordion"</code><code class="plain">&gt;</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">h3</code><code class="plain">&gt;First header&lt;/</code><code class="keyword">h3</code><code class="plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">div</code><code class="plain">&gt;First content panel&lt;/</code><code class="keyword">div</code><code class="plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">h3</code><code class="plain">&gt;Second header&lt;/</code><code class="keyword">h3</code><code class="plain">&gt;</code></div><div class="line number5 index4 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">div</code><code class="plain">&gt;Second content panel&lt;/</code><code class="keyword">div</code><code class="plain">&gt;</code></div><div class="line number6 index5 alt1"><code class="plain">&lt;/</code><code class="keyword">div</code><code class="plain">&gt;</code></div></div></td></tr></tbody></table></div>
+		<p>Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the <a href="#option-header"><code>header</code></a> option for information on how to use custom markup structures.</p>
+		<p>The panels can be activated programmatically by setting the <a href="#option-active"><code>active</code></a> option.</p>
+		<h3>Keyboard interaction</h3>
+		<p>When focus is on a header, the following key commands are available:</p>
+		<ul>
+			<li>UP/LEFT - Move focus to the previous header. If on first header, moves focus to last header.</li>
+			<li>DOWN/RIGHT - Move focus to the next header. If on last header, moves focus to first header.</li>
+			<li>HOME - Move focus to the first header.</li>
+			<li>END - Move focus to the last header.</li>
+			<li>SPACE/ENTER - Activate panel associated with focused header.</li>
+		</ul>
+		<p>When focus is in a panel:</p>
+		<ul>
+			<li>CTRL+UP: Move focus to associated header.</li>
+		</ul>
+	</div>
+<h3>Additional Notes:</h3>
+<div class="longdesc"><ul><li>
+			This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
+		</li></ul></div>
+<section class="entry-examples" id="entry-examples"><header><h2 class="underline">Example:</h2></header><div class="entry-example" id="example-0">
+<h4><span class="desc">A simple jQuery UI Accordion</span></h4>
+<div class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div><div class="line number20 index19 alt1">20</div><div class="line number21 index20 alt2">21</div><div class="line number22 index21 alt1">22</div><div class="line number23 index22 alt2">23</div><div class="line number24 index23 alt1">24</div><div class="line number25 index24 alt2">25</div><div class="line number26 index25 alt1">26</div><div class="line number27 index26 alt2">27</div><div class="line number28 index27 alt1">28</div><div class="line number29 index28 alt2">29</div><div class="line number30 index29 alt1">30</div><div class="line number31 index30 alt2">31</div><div class="line number32 index31 alt1">32</div><div class="line number33 index32 alt2">33</div><div class="line number34 index33 alt1">34</div><div class="line number35 index34 alt2">35</div><div class="line number36 index35 alt1">36</div><div class="line number37 index36 alt2">37</div><div class="line number38 index37 alt1">38</div><div class="line number39 index38 alt2">39</div><div class="line number40 index39 alt1">40</div><div class="line number41 index40 alt2">41</div><div class="line number42 index41 alt1">42</div><div class="line number43 index42 alt2">43</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">&lt;!doctype html&gt;</code></div><div class="line number2 index1 alt1"><code class="plain">&lt;</code><code class="keyword">html</code> <code class="color1">lang</code><code class="plain">=</code><code class="string">"en"</code><code class="plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="plain">&lt;</code><code class="keyword">head</code><code class="plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">meta</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code><code class="plain">&gt;</code></div><div class="line number5 index4 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">title</code><code class="plain">&gt;accordion demo&lt;/</code><code class="keyword">title</code><code class="plain">&gt;</code></div><div class="line number6 index5 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">link</code> <code class="color1">rel</code><code class="plain">=</code><code class="string">"stylesheet"</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css</a>"</code><code class="plain">&gt;</code></div><div class="line number7 index6 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/jquery-1.8.2.js">http://code.jquery.com/jquery-1.8.2.js</a>"</code><code class="plain">&gt;&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number8 index7 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.1/jquery-ui.js">http://code.jquery.com/ui/1.9.1/jquery-ui.js</a>"</code><code class="plain">&gt;&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number9 index8 alt2"><code class="plain">&lt;/</code><code class="keyword">head</code><code class="plain">&gt;</code></div><div class="line number10 index9 alt1"><code class="plain">&lt;</code><code class="keyword">body</code><code class="plain">&gt;</code></div><div class="line number11 index10 alt2">&nbsp;</div><div class="line number12 index11 alt1"><code class="plain">&lt;</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"accordion"</code><code class="plain">&gt;</code></div><div class="line number13 index12 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">h3</code><code class="plain">&gt;Section 1&lt;/</code><code class="keyword">h3</code><code class="plain">&gt;</code></div><div class="line number14 index13 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">div</code><code class="plain">&gt;</code></div><div class="line number15 index14 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">p</code><code class="plain">&gt;Mauris mauris ante, blandit et, ultrices a, suscipit eget.</code></div><div class="line number16 index15 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,</code></div><div class="line number17 index16 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.</code></div><div class="line number18 index17 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">Nam mi. Proin viverra leo ut odio.&lt;/</code><code class="keyword">p</code><code class="plain">&gt;</code></div><div class="line number19 index18 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;/</code><code class="keyword">div</code><code class="plain">&gt;</code></div><div class="line number20 index19 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">h3</code><code class="plain">&gt;Section 2&lt;/</code><code class="keyword">h3</code><code class="plain">&gt;</code></div><div class="line number21 index20 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">div</code><code class="plain">&gt;</code></div><div class="line number22 index21 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">p</code><code class="plain">&gt;Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.</code></div><div class="line number23 index22 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,</code></div><div class="line number24 index23 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">faucibus interdum tellus libero ac justo.&lt;/</code><code class="keyword">p</code><code class="plain">&gt;</code></div><div class="line number25 index24 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;/</code><code class="keyword">div</code><code class="plain">&gt;</code></div><div class="line number26 index25 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">h3</code><code class="plain">&gt;Section 3&lt;/</code><code class="keyword">h3</code><code class="plain">&gt;</code></div><div class="line number27 index26 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">div</code><code class="plain">&gt;</code></div><div class="line number28 index27 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">p</code><code class="plain">&gt;Nam enim risus, molestie et, porta ac, aliquam ac, risus.</code></div><div class="line number29 index28 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">Quisque lobortis.Phasellus pellentesque purus in massa.&lt;/</code><code class="keyword">p</code><code class="plain">&gt;</code></div><div class="line number30 index29 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">ul</code><code class="plain">&gt;</code></div><div class="line number31 index30 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">li</code><code class="plain">&gt;List item one&lt;/</code><code class="keyword">li</code><code class="plain">&gt;</code></div><div class="line number32 index31 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">li</code><code class="plain">&gt;List item two&lt;/</code><code class="keyword">li</code><code class="plain">&gt;</code></div><div class="line number33 index32 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">li</code><code class="plain">&gt;List item three&lt;/</code><code class="keyword">li</code><code class="plain">&gt;</code></div><div class="line number34 index33 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;/</code><code class="keyword">ul</code><code class="plain">&gt;</code></div><div class="line number35 index34 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;/</code><code class="keyword">div</code><code class="plain">&gt;</code></div><div class="line number36 index35 alt1"><code class="plain">&lt;/</code><code class="keyword">div</code><code class="plain">&gt;</code></div><div class="line number37 index36 alt2">&nbsp;</div><div class="line number38 index37 alt1"><code class="plain">&lt;</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number39 index38 alt2"><code class="plain">$( "#accordion" ).accordion();</code></div><div class="line number40 index39 alt1"><code class="plain">&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number41 index40 alt2">&nbsp;</div><div class="line number42 index41 alt1"><code class="plain">&lt;/</code><code class="keyword">body</code><code class="plain">&gt;</code></div><div class="line number43 index42 alt2"><code class="plain">&lt;/</code><code class="keyword">html</code><code class="plain">&gt;</code></div></div></td></tr></tbody></table></div>
+<h4>Demo:</h4>
+<div class="demo code-demo" data-height="350"></div>
+</div></section>
+</div></article>
+</body>
+</html>