JQuery UI: What It Is and How To Use It

Published in

Gaby Codes

3 min readDec 3, 2017

Working with JavaScript can be tricky.

I started learning JavaScript a few weeks ago, and boy, was it ever confusing. I had a good grasp on HTML and CSS, two straightforward languages that are fairly simple to understand; JavaScript was a different beast entirely. It’s a powerful coding language, but unfortunately it can be pretty abstract and difficult to beginners to understand.

While I encourage everyone to take the time to master JavaScript, it’s worth noting that there are some great libraries out there that can help you add functionality to your projects with relative ease. One really cool one is the jQuery UI library.

Intro to jQuery UI Library

If you’re unfamiliar with jQuery, it is a cross-platform JavaScript library designed to simplify client-side scripting. It utilizes different syntax and functions that make it easier to navigate a document, manipulate the DOM and handle events. JQuery UI is another library built on top of that library (stay with me now).

The jQuery library is made up of various user interface interactions, effects, widgets, and themes that can be used to add plenty of intuitive functionality to your sites without going too in-depth with scripting yourself.

Some things you can do with it:

Add interactive functionality, such as the ability to drag, drop and resize page elements with the mouse
Add cool effects to make your content stand out
Utilize the ready-made widgets

The coolest part of jQuery UI are the all widgets you can access. They are pretty much ready right out of the box and require only minimal code to get them going.

Implementing a jQuery UI Widget

I’m going to take you through the process of adding the jQuery UI accordion widget to your project. Read on for the steps, and check out the example on CodePen below.

Here‘s how to set up the accordion menu in four quick steps:

1. First, make sure you have the correct structure in your HTML. This particular widget requires that each menu “group” (menu item title plus content) be comprised of a header followed by some sort of container element, and that everything be contained in one all-encompassing element. Here’s an example of what it might look like:

<body>
  <div> //This div holds the entire accordion menu
     <h3>The Best Chicken Fried Steak</h3> //Always visible on menu
     <section class="content"> //Holds all content, can be hidden
        <div class="text">
          <h2>The Best Chicken Fried Steak</h2>
          <p>Recipe...</p>
        </div>
     </section>
     <h3>Peggy-Sue's Gumbo!</h3>
     <div class="content">
        <div class="text">
          <h2>Peggy-Sue's Gumbo</h2>
          <p>Recipe...</p>
        </div>
     </div>
  </div>
</body>

2. Add an id of “accordion” to your main menu container, the parent of all of the menu components.

<div id="accordion">

3. In your HTML, include jQuery library and jQuery UI library at the bottom of the <body>.

<body><script src="https://code.jquery.com/jquery-1.12.4.js">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</body>

4. Add this line to your JavaScript file:

$("#accordion").accordion();

That’s it!

That’s really all it takes to get the accordion menu widget going. It’s super powerful and simple to implement. There are a few customization options for this particular widget, so you can take this a little further if you wanted to (check out the accordion docs here).

Conclusion

The jQuery UI library is full of powerful, intuitive, easy-to-use features that can add great functionality to your sites. There are typically many customization options. It’s also very well documented; click here to go to the docs. Check it out and add some cool widgets to your projects!

Well, that’s all for now. Thanks for reading, and happy coding!