jQuery UI Tutorial
jQuery UI is a user-interface library built on top of jQuery. It provides widgets, interactions, effects and themeable components such as Datepicker, Accordion, Dialog, Autocomplete, Draggable and Tabs.
jQuery itself is still required first. The jQuery UI JavaScript and theme CSS are then loaded after it.
Load jQuery and jQuery UI Top ↑
The section examples are being modernized against jQuery 4.0.0 and jQuery UI 1.14.2.
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.14.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.2/jquery-ui.min.js"></script>
Load the libraries once on a page. Do not include another copy of jQuery later in the footer, because replacing the active jQuery instance can break already-initialized plugins.
Create Your First jQuery UI Widget Top ↑
$( function () {
$( "#accordion" ).accordion();
});
<div id="accordion">
<h3>Section 1</h3>
<div>First panel content</div>
<h3>Section 2</h3>
<div>Second panel content</div>
</div>
Continue with the Accordion tutorial →
jQuery UI Themes Top ↑
The theme CSS controls the visual styling used by jQuery UI widgets. You can use the standard CDN themes or configure a theme with ThemeRoller.
Open ThemeRoller · Try the existing theme-selection demo
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.14.2/themes/humanity/jquery-ui.css">
jQuery UI Tutorials Top ↑
| Widget / interaction | What it does |
|---|---|
| Accordion | Expand and collapse sections of content. |
| Datepicker | Display a calendar for date selection. |
| Autocomplete | Suggest matching words or records as the user types. |
| Controlgroup | Group related controls with consistent jQuery UI styling. |
| Checkboxradio | Style checkbox and radio inputs as themeable controls. |
| Slider | Select a value or range by moving a handle. |
| Draggable | Make an element movable with the pointer. |
| Droppable | Create targets that accept draggable elements. |
| Dialog | Display content in a configurable dialog window. |
| Menu | Build keyboard-accessible menus and submenus. |
| Progressbar | Show completion or process progress. |
| Tabs | Group related content into navigable panels. |
| Tooltip | Show contextual help when users interact with elements. |
| Selectable | Select one or more items with pointer/keyboard interaction. |
| Resizable | Let users resize elements through handles. |
Video Tutorials on jQuery UI Top ↑
The original page loaded the YouTube playlist through the YouTube Data API at runtime. The playlist is now embedded directly, so the tutorial does not expose an API key or depend on a server-side API request every time the page loads.
Recommended Learning Path Top ↑
- Start with Accordion or Datepicker.
- Learn data-assisted input with Autocomplete.
- Practice interactions with Draggable and Droppable.
- Build interface components with Dialog, Tabs and Tooltip.
- Use Progressbar for task status and Slider for range/value selection.
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
