How to Create JQuery UI Tabs with Example

Jquery UI Tabs Example

In this article, we will see how to create jquery UI tabs with example

Tabs widget

It indicates tab-based sections similar to an accordion. It is one of the widgets in the jquery UI

Step by Step guide to create tabs

1. Create a new HTML document with basic HTML document structure code by linking 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>
<script>

</script>
</body>
</html>

2. code the structure of the widget in the body(i.e HTML or markup):
To create a tabs widget; we need to create a container with a list of anchored tab headings followed by associated content sections.
Note: Each content section must have a unique id that corresponds to the hash in the anchor’s href attribute value of the associated tab heading.

<div id="tabs">
<ul>
<li><a href="#heading1">Heading 1</a></li>
<li><a href="#heading2">Heading 2</a></li>
</ul>
<div id="heading1">Content 1</div>
<div id="heading2">Content 2</div>


</div>

3. Select the container div using jQuery selector and call tabs jquery UI function on it

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

Output:

jquery ui tabs exampleIf you see the above output, default the “heading1” is selected so the content1 is displayed. When we select “heading2” the content2 will be displayed below.

 

Leave a Reply