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:
If 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.