What is the history of jQuery UI and how to use it ?

Last Updated : 23 Mar, 2022

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. It is the best way to design attractive website easily. For example, if you want to add date picker on web page then you can simply create a text box and attach jQuery UI datepicker() function with the text box. It will create attractive datepicker widget.

Why we use jQuery UI ?

jQuery UI contains a set of plugins that provides new features to the core jQuery library. It is categorized into four groups i.e. interactions, widgets, effects, utilities. It is an open-source library that contains different animation effects and widgets that help in the development of highly interactive user-friendly web applications. This library needs very less maintenance. It can be used with almost all browsers.

How to use jQuery UI in a Project?

There are basically two methods to add jQuery UI in a project. The first one is using CDN link, and the second one is by downloading all files of jQuery UI.

1. Using CDN Link: Without downloading the jQuery UI files, you can directly use CDN links inside the head section to run the code.

<link href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel =”stylesheet”>
<script src=”https://code.jquery.com/jquery-1.10.2.js”></script>
<script src=”https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

2. Download jQuery UI Files: Visit the official documentation (https://jqueryui.com/) of the jQueryUI and click on the Custom Download button to download a customized version of the library. After downloading the zip file, unzip the files and save them in a folder. After that create an HTML file and add the following links inside head section of code.

<link rel=”stylesheet” href=”jqueryui/jquery-ui.min.css”>
<script src=”jqueryui/external/jquery/jquery.js”></script>
<script src=”jqueryui/jquery-ui.min.js”></script>

Example: In this example, we will create an animated accordion effect using jQuery UI.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href= 
    "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"> 
    </script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> 
    </script> 
  
    <script> 
        $(function () { 
            $("#gfg").accordion({ 
                animate: 1000 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>jQuery UI Accordion animate Option</h3> 
    <br><br> 
  
    <div id="gfg"> 
        <h3>GFG</h3> 
        <div>GeeksforGeeks</div> 
        <h3>Geeks</h3> 
        <div>GeeksforGeeks</div> 
        <h3>GeeksforGeeks</h3> 
        <div>Welcome to GeeksforGeeks</div> 
    </div> 
</body> 
  
</html>