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

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

Customize the header icons with the <strong>icons</strong> 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.

Customize the header icons with the <code>icons</code> 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.

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 <strong>fillSpace</strong>
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
<strong>resizable</strong>.

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 <code>fillSpace</code> 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 <code>resizable</code>.

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

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

Populate an alternate field with its own date format whenever a date is
selected using the <strong>altField</strong> and <strong>altFormat</strong>
options. This feature could be used to present a human-friendly date for
user selection, while passing a more computer-friendly date through for
further processing.

Populate an alternate field with its own date format whenever a date is
selected using the <code>altField</code> and <code>altFormat</code>
options. This feature could be used to present a human-friendly date for
user selection, while passing a more computer-friendly date through for
further processing.

Display a button for selecting Today's date and a Done button for
closing the calendar with the boolean <strong>showButtonPanel</strong>
option. Each button is enabled by default when the bar is displayed, but
can be turned off with additional options. Button text is customizable.

Display a button for selecting Today's date and a Done button for
closing the calendar with the boolean <code>showButtonPanel</code> option.
Each button is enabled by default when the bar is displayed, but can be
turned off with additional options. Button text is customizable.

Show month and year dropdowns in place of the static month/year header
to facilitate navigation through large timeframes. Add the boolean
<strong>changeMonth</strong> and <strong>changeYear</strong> options.

Show month and year dropdowns in place of the static month/year header
to facilitate navigation through large timeframes. Add the boolean
<code>changeMonth</code> and <code>changeYear</code> options.

Restrict the range of selectable dates with the
<strong>minDate</strong> and <strong>maxDate</strong> options. Set the
beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a
numeric offset from today (-20), or as a string of periods and units ('+1M
+10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months,
or 'Y' for years.

Restrict the range of selectable dates with the <code>minDate</code>
and <code>maxDate</code> options. Set the beginning and end dates as
actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today
(-20), or as a string of periods and units ('+1M +10D'). For the last,
use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.

Set the <strong>numberOfMonths</strong> option to an integer of 2 or
more to show multiple months in a single datepicker.

Set the <code>numberOfMonths</code> option to an integer of 2 or more
to show multiple months in a single datepicker.

Confirm an action that may be destructive or important. Set the
<strong>modal</strong> option to true, and specify primary and secondary
user actions with the <strong>buttons</strong> option.

Confirm an action that may be destructive or important. Set the
<code>modal</code> option to true, and specify primary and secondary user
actions with the <code>buttons</code> option.

Use a modal dialog to require that the user enter data during a
multi-step process. Embed form markup in the content area, set the
<strong>modal</strong> option to true, and specify primary and secondary
user actions with the <strong>buttons</strong> option.

Use a modal dialog to require that the user enter data during a
multi-step process. Embed form markup in the content area, set the
<code>modal</code> option to true, and specify primary and secondary user
actions with the <code>buttons</code> option.

Use a modal dialog to explicitly acknowledge information or an action
before continuing their work. Set the <strong>modal</strong> option to
true, and specify a primary action (Ok) with the <strong>buttons</strong>
option.

Use a modal dialog to explicitly acknowledge information or an action
before continuing their work. Set the <code>modal</code> option to true,
and specify a primary action (Ok) with the <code>buttons</code> option.

A modal dialog prevents the user from interacting with the rest of the
page until it is closed. To add a semi-transparent layer that dims out the
page content behind the dialog, set the background color and opacity of the
<strong>overlay</strong> option.

A modal dialog prevents the user from interacting with the rest of the
page until it is closed. To add a semi-transparent layer that dims out the
page content behind the dialog, set the background color and opacity of the
<code>overlay</code> option.

-Constrain the movement of each draggable by defining the boundaries of the
draggable area. Set the <strong>axis</strong> option to limit the
draggable's path to the x- or y-axis, or use the
<strong>containment</strong> option to specify a parent DOM element or a
jQuery selector, like 'document.'
+Constrain the movement of each draggable by defining the boundaries of the
draggable area. Set the <code>axis</code> option to limit the draggable's
path to the x- or y-axis, or use the <code>containment</code> option to
specify a parent DOM element or a jQuery selector, like 'document.'

-Position the cursor while dragging the object. By default the cursor
appears in the center of the dragged object; use the
<strong>cursorAt</strong> option to specify another location relative to
the draggable (specify a pixel value from the top, right, bottom, and/or
left). Customize the cursor's appearance by supplying the
<strong>cursor</strong> option with a valid CSS cursor value: default,
move, pointer, crosshair, etc.
+Position the cursor while dragging the object. By default the cursor
appears in the center of the dragged object; use the <code>cursorAt</code>
option to specify another location relative to the draggable (specify a
pixel value from the top, right, bottom, and/or left). Customize the
cursor's appearance by supplying the <code>cursor</code> option with a
valid CSS cursor value: default, move, pointer, crosshair, etc.

-Delay the start of dragging for a number of milliseconds with the
<strong>delay</strong> option; prevent dragging until the cursor is held
down and dragged a specifed number of pixels with the
<strong>distance</strong> option.
+Delay the start of dragging for a number of milliseconds with the
<code>delay</code> option; prevent dragging until the cursor is held down
and dragged a specifed number of pixels with the <code>distance</code>
option.

-Layer functionality onto the draggable using the <strong>start</strong>,
<strong>drag</strong>, and <strong>stop</strong> events. Start is fired at
the start of the drag; drag during the drag; and stop when dragging stops.
+Layer functionality onto the draggable using the <code>start</code>,
<code>drag</code>, and <code>stop</code> events. Start is fired at the
start of the drag; drag during the drag; and stop when dragging stops.

Allow dragging only when the cursor is over a specific part of the
draggable. Use the <strong>handle</strong> option to specify the jQuery
selector of an element (or group of elements) used to drag the object.

Or prevent dragging when the cursor is over a specific element (or
group of elements) within the draggable. Use the <strong>cancel</strong>
option to specify a jQuery selector over which to "cancel" draggable
functionality.

Allow dragging only when the cursor is over a specific part of the
draggable. Use the <code>handle</code> option to specify the jQuery
selector of an element (or group of elements) used to drag the object.

Or prevent dragging when the cursor is over a specific element (or
group of elements) within the draggable. Use the <code>cancel</code>
option to specify a jQuery selector over which to "cancel" draggable
functionality.

-Return the draggable (or it's helper) to its original location when
dragging stops with the boolean <strong>revert</strong> option.
+Return the draggable (or it's helper) to its original location when
dragging stops with the boolean <code>revert</code> option.

-Automatically scroll the document when the draggable is moved beyond the
viewport. Set the <strong>scroll</strong> option to true to enable
auto-scrolling, and fine-tune when scrolling is triggered and its speed
with the <strong>scrollSensitivity</strong> and
<strong>scrollSpeed</strong> options.
+Automatically scroll the document when the draggable is moved beyond the
viewport. Set the <code>scroll</code> option to true to enable
auto-scrolling, and fine-tune when scrolling is triggered and its speed
with the <code>scrollSensitivity</code> and <code>scrollSpeed</code>
options.

Snap the draggable to the inner or outer boundaries of a DOM element.
Use the <strong>snap</strong>, <strong>snapMode</strong> (inner, outer,
both), and <strong>snapTolerance</strong> (distance in pixels the draggable
must be from the element when snapping is invoked) options.

Snap the draggable to the inner or outer boundaries of a DOM element.
Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and
<code>snapTolerance</code> (distance in pixels the draggable must be from
the element when snapping is invoked) options.

Or snap the draggable to a grid. Set the dimensions of grid cells
(height and width in pixels) with the <strong>grid</strong> option.

Or snap the draggable to a grid. Set the dimensions of grid cells
(height and width in pixels) with the <code>grid</code> option.

Provide feedback to users as they drag an object in the form of a
helper. The <strong>helper</strong> option accepts the values 'original'
(the draggable object moves with the cursor), 'clone' (a duplicate of the
draggable moves with the cursor), or a function that returns a DOM element
(that element is shown near the cursor during drag). Control the helper's
transparency with the <strong>opacity</strong> option.

Provide feedback to users as they drag an object in the form of a
helper. The <code>helper</code> option accepts the values 'original' (the
draggable object moves with the cursor), 'clone' (a duplicate of the
draggable moves with the cursor), or a function that returns a DOM element
(that element is shown near the cursor during drag). Control the helper's
transparency with the <code>opacity</code> option.

To clarify which draggable is in play, bring the draggable in motion to
front. Use the <strong>zindex</strong> option to set a higher z-index for
the helper, if in play, or use the <strong>stack</strong> option to ensure
that the last item dragged will appear on top of others in the same group
on drag stop.

To clarify which draggable is in play, bring the draggable in motion to
front. Use the <code>zIndex</code> option to set a higher z-index for the
helper, if in play, or use the <code>stack</code> option to ensure that the
last item dragged will appear on top of others in the same group on drag
stop.

Specify using the <strong>accept</strong> option which element (or
group of elements) is accepted by the target droppable.

Specify using the <code>accept</code> option which element (or group of
elements) is accepted by the target droppable.

When working with nested droppables &#8212; for example, you may have
an editable directory structure displayed as a tree, with folder and
document nodes &#8212; the <strong>greedy</strong> option set to true
prevents event propagation when a draggable is dropped on a child node
(droppable).

When working with nested droppables &#8212; for example, you may have
an editable directory structure displayed as a tree, with folder and
document nodes &#8212; the <code>greedy</code> option set to true prevents
event propagation when a draggable is dropped on a child node
(droppable).

Return the draggable (or it's helper) to its original location when
dragging stops with the boolean <strong>revert</strong> option set on the
<strong>draggable</strong>.

Return the draggable (or it's helper) to its original location when
dragging stops with the boolean <code>revert</code> option set on the
draggable.

Change the droppable's appearance on hover, or when the droppable is
active (an acceptable draggable is dropped on it). Use the
<strong>hoverClass</strong> or <strong>activeClass</strong> options to
specify respective classes.

Change the droppable's appearance on hover, or when the droppable is
active (an acceptable draggable is dropped on it). Use the
<code>hoverClass</code> or <code>activeClass</code> options to specify
respective classes.

Animate the resize action using the <strong>animate</strong> option
(boolean). When this option is set to true, drag the outline to the desired
location; the element animates to that size on drag stop.

Animate the resize action using the <code>animate</code> option
(boolean). When this option is set to true, drag the outline to the desired
location; the element animates to that size on drag stop.

Maintain the existing aspect ratio or set a new one to constrain the
proportions on resize. Set the <strong>aspectRatio</strong> option to true,
and optionally pass in a new ratio (i.e., 4/3)

Maintain the existing aspect ratio or set a new one to constrain the
proportions on resize. Set the <code>aspectRatio</code> option to true, and
optionally pass in a new ratio (i.e., 4/3)

Define the boundaries of the resizable area. Use the
<strong>containment</strong> option to specify a parent DOM element or a
jQuery selector, like 'document.'

Define the boundaries of the resizable area. Use the
<code>containment</code> option to specify a parent DOM element or a jQuery
selector, like 'document.'

Delay the start of resizng for a number of milliseconds with the
<strong>delay</strong> option; prevent resizing until the cursor is held
down and dragged a specifed number of pixels with the
<strong>distance</strong> option.

Delay the start of resizng for a number of milliseconds with the
<code>delay</code> option; prevent resizing until the cursor is held down
and dragged a specifed number of pixels with the <code>distance</code>
option.

Limit the resizable element to a maximum or minimum height or width
using the <strong>maxHeight</strong>, <strong>maxWidth</strong>,
<strong>minHeight</strong>, and <strong>minWidth</strong> options.

Limit the resizable element to a maximum or minimum height or width
using the <code>maxHeight</code>, <code>maxWidth</code>,
<code>minHeight</code>, and <code>minWidth</code> options.

Snap the resizable element to a grid. Set the dimensions of grid cells
(height and width in pixels) with the <strong>grid</strong> option.

Snap the resizable element to a grid. Set the dimensions of grid cells
(height and width in pixels) with the <code>grid</code> option.

Resize multiple elements simultaneously by clicking and dragging the
sides of one. Pass a shared selector into the <strong>alsoResize</strong>
option.

Resize multiple elements simultaneously by clicking and dragging the
sides of one. Pass a shared selector into the <code>alsoResize</code>
option.

Instead of showing the actual element during resize, set the
<strong>ghost</strong> option to true to show a semi-transparent part of
the element.

Instead of showing the actual element during resize, set the
<code>ghost</code> option to true to show a semi-transparent part of the
element.

Write a function that fires on the <strong>stop</strong> event to
collect the index values of selected items. Present values as feedback, or
pass as a data string.

Write a function that fires on the <code>stop</code> event to collect
the index values of selected items. Present values as feedback, or pass as
a data string.

Change the orientation of the range slider to vertical. Assign a
height value via <strong>.height()</strong> or by setting the height
through CSS, and set the <strong>orientation</strong> option
to "vertical."

Change the orientation of the range slide