In this article I will try to explain how can we create a tab panel using HTML, CSS and JQuery for UI in few simple steps.
If we see from UI point of view, user don't want to click on a link and navigate to next tab to see what they clicked. Rather they want all content in a tabbed view on same page. In this article I will try to explain how to create a tab panel with html, css and jquery.
To demonstrate tab panel I will create a sample HTML code. To make it fully working and interacting I will use css and few lines of jquery. Below is the sample tab panel I will try to create.
Let's first start with a piece of HTML.
<html>
<head>
<title>BigConcept Tab Panel Example</title>
<link rel="stylesheet" type="text/css" href="CSS/Style.css">
<script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="JS/tabpanel.js"></script>
</head>
<body>
<h3>Tab Panel Example</h3>
<hr />
<div class="tab-panel">
<ul class="tab-link">
<li class="active"><a href="#FirstTab">First Tab</a></li>
<li><a href="#SecondTab">Second Tab</a></li>
<li><a href="#ThirdTab">Third Tab</a></li>
</ul>
<div class="content-area">
<div id="FirstTab" class="active">
<p>This is sample tab area in First Tab.</p>
</div>
<div id="SecondTab" class="inactive">
<p>This is the sample tab area in Second tab.</p>
</div>
<div id="ThirdTab" class="inactive">
<p>This is the sample tab area in Third tab.</p>
</div>
</div>
</div>
</body>
</html>
Once I am done with HTML code now it's time to add css to my example. Below is the CSS I used in my example.
Style.css
body {
background-color: #f3f3df;
width:1000px;
margin:auto;
padding:20px;
}
hr{border:1px solid #EEE; }
a{text-decoration:none;}
/*----------tap panel style------*/
.tab-panel {
width: 100%;
display: inline-block;
}
.tab-link:after {
display: block;
padding-top: 20px;
content: '';
}
.tab-link li {
margin: 0px 5px;
float: left;
list-style: none;
}
.tab-link a {
padding: 8px 15px;
display: inline-block;
border-radius: 10px 3px 0px 0px;
background: #8dc8f5;
font-weight: bold;
color: #4c4c4c;
}
.tab-link a:hover {
background: #b7c7e5;
text-decoration: none;
}
li.active a, li.active a:hover {
background: #ccc;
color: #0094ff;
text-decoration:none;
}
.content-area {
padding: 15px;
border-radius: 3px;
box-shadow: -1px 1px 1px rgba(0,0,0,0.15);
background: #fff;
border: 1px solid #ccc;
}
.inactive{
display: none;
}
.active {
display: block;
}
Now I am on my final step and my example will be completed. Let's add jquery to my example. Below is the jquery lines I used in my example.
tabpanel.js
$(document).ready(function () {
$('.tab-panel .tab-link a').on('click', function (e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
//Fade effect
// $('.tab-panel ' + currentAttrValue).fadeIn(1000).siblings().hide();
//Sliding effect
$('.tab-panel ' + currentAttrValue).slideDown(400).siblings().slideUp(400);
//Sliding up-down effect
// $('.tab-panel ' + currentAttrValue).siblings().slideUp(400);
// $('.tab-panel ' + currentAttrValue).delay(400).slideDown(400);
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
Hope this can help you. Use this code and try yourself. I will come with such tips soon.
