1. jQuery UI

2. Introduction From the jQuery UI Home Page
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

3. Referencing
The steps to reference the jQuery UI library is the same as the steps to get jQuery
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

4. Widgets There are many widgets but we will only cover a few Accordion
Autocomplete
DatePicker
Menu
Tabs

5. The Accordion Widget (Introduction)
Displays collapsible content
Use to conserve screen real estate
To implement, use pairs of headers and content panels

6. The AutoComplete Widget (Introduction)
Use with an input widget to enable auto completion features
Set the source to a list of possible strings

7. The DatePicker Widget (Introduction)
Use to create a selectable calendar
It’s possible to set the minimum and maximum selectable values
It’s possible to change the format of the calendar

8. The DatePicker Widget (Default)

9. The Menu Widget
A menu can be created from any valid markup as long as the elements have a strict parent/child relationship. The most commonly used element is the unordered list (<ul>)

10. The Menu Widget
Create a menu using a list

11. The Tabs widget Create content that appears on multiple tabs
The tabs themselves must be in either an ordered (<ol>) or unordered (<ul>) list
Each tab "title" must be inside of a list item (<li>) and wrapped by an anchor (<a>) with an href attribute
Each tab panel may be any valid element but it must have an id which corresponds to the hash in the anchor of the associated tab