Explore 100's Of Free Video Tutorials

Keep Learning, Keep Coding & Keep Sharing

Creating Tabs Widget

Notes:

jQuery UI - Creating Tabs widget:

Tabs Widget: indicates tab based sections similar to accordion

Creating Tabs Widget:

1. Create a new HTML document with basic HTML document structure code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><title>Tabs Demo</title>
</head>
<body></body>
</html>

2. Link the necessary jQueryUI libray files to the HTML document

<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>

3. Code the structure of the widget (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 unique id which corresponds to the hash in the anchor’s href attribute value of 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>

4. Select the element using jQuery and call the respective jQuery UI function on it

Select the container div using jQuery selector and call tabs jQuery UI function on it
<script type="text/javascript">
$( "#tabs" ).tabs();
</script>

Interview Questions: