How to Create JQuery UI Accordion Widgets | Step by Step Guide

Jquery UI Accordion Widgets

In this article, we will discuss what is jquery UI accordion widgets and how to create them.

What is an accordion widget?

It is a collapsible and expandable UI control, broken into logical sections. It is also used for user experience with animation. You just call the “accordion()” function and it will work automatically. It is one of the JQuery UI Built-in widgets.

A step-by-step guide to Creating Accordion

1. Create a new HTML document with basic HTML document structure code and link jquery UI library files

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

2.Code the structure of the widget( i.e. HTML or markup) :
To create an accordion widget; we need to create a container with pairs of headers and associated content sections

<div id="accordion">
		<h3>Header 1</h3>
		<div>Content 1</div>
		<h3>Header 2</h3>
		<div>Content 2</div>
		<h3>Header 3</h3>
		<div>Content 3</div>

	</div>

3. Select the element using jquery and call the respective jQuery UI function on select the container div using jQuery selector and call the accordion jQuery UI function on it

<script type ="text/javascript">
$("#accordion").accordion();
</script>

Output:

jquery ui accordion widgets

See the below output, the default accordion is selected in header1, so content1 is displayed below. If you click to select the header2 then the content2 is displayed and if you click to select the header3 then the content3 is displayed below.

Leave a Reply