22Jan

How to create page content tabs with JQuery

Posted by admin as JQuery, Javascript/AJAX

This tutorial teaches you on how to create page content tabbing using Jquery javascript framework,HTML and CSS.You can see it in action by clicking here and you can download the files by clicking here.

What we will need:
1. Jquery javascript framework
2. JQuery UI

These files are included in the download files but you can use your own if JQuery and JQuery UI is included in your existing application.

The include files:

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery-ui-personalized-1.5.2.packed.js"></script>

style.css is the stylesheet that we will be using in this article.”jquery-1.2.6.min.js” is the JQuery framework and the other one is the JQuery UI file.We will be putting it between the head tags like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Content Tabbing with Jquery demo page</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery-ui-personalized-1.5.2.packed.js"></script>

style.css file


.content{
    width: 550px;
    margin: 20px;
    padding: 10px;
    background: #600303;
    border: 1px solid #fff;
    margin-bottom: 15px;
  font-family:Verdana;
  font-size:14px;
}
 
.tab_navigation li {
   display: inline;
   list-style: none;
   padding-right: 5px;
}

.tab_navigation li a {
  text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    padding: 4px 6px;
}

.tab_navigation li a:hover, 
.tab_navigation li a:active, 
.tab_navigation li.ui-tabs-selected a {
   background: #872325;
   color: #fff;
   text-decoration: underline;
}

.tabs{
    margin-top: 2px;
    background: #fff;
    border: 1px solid #dedbd1;
    padding: 5px;
}

.ui-tabs-hide {
    display: none;
}

This is basically a css file that controls the appearance of our tabs.


.ui-tabs-hide {
    display: none;
}

This .css code is used by JQuery to hide tabs that are not active at the moment.

The HTML code

 <div id="tab_container" class="content">

    <ul class="tab_navigation">
    <li><a href="#tab_1">Tab 1</a></li>
    <li><a href="#tab_2">Tab 2</a></li>
    <li><a href="#tab_3">Tab 3</a></li>
    </ul>

 <!-- tab 1 -->
  <div id="tab_1" class="tabs">
  <p><b>This is the content of Tab 1</b></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <!-- tab 2 -->
  <div id="tab_2" class="tabs">
    <p><b>This is the content of Tab 2</b></p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <!-- tab 3 -->
  <div id="tab_3" class="tabs">
  <p><b>This is the content of Tab 3</b></p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. N</p>
    </div>

    </div>

This is the HTML code that we are using to display the tabs.The tabs are have different id’s but the same class and are inside a parent div.There is also a navigation that we will click in order to display the tabs.

The JQuery effect

<script type="text/javascript">
$(document).ready(function() {
  $('#tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
</script>

Pretty simple eh?One line of JQuery code and that’s it.If you want the tabs with no animation,just remove the effects,the code should be:

<script type="text/javascript">
$(document).ready(function() {
  $('#tab_container > ul').tabs();
});
</script>

This code should be placed between the head tags,underneath the include files.

That is simply it.Hope you understand this tutorial and you use it in your future applications sometime.Download the tutorial by clicking here and click here to view the demo.Credits go out to Dan Harper for an inspiration about this post.