Creating Simple Tabs HTML, CSS & jQuery

HTML / CSS Tutorials, HTML Tutorials, jQuery Tutorials

Creating Simple Tabs HTML, CSS & jQuery

In this Tutorial, we will be Creating Simple Tabs with HTML, CSS & jQuery. Creating a tabbed component is actually a simple task, although it may not seem it at first and obviously depends on your level of skill. The difficulty also depends on how advanced you want your tabs to be, but for the sake of this tutorial, I am keeping it simple.

Tabs are a very nice way of grouping lots of content into a very small space.

View Demo

Complete HTML Code

<div class="tabs_wrap">
<ul class="tabs_nav">
    <li class="active"><a href="#tab1">Tab Name 1</a></li>
    <li><a href="#tab2">Tab Name 2</a></li>
    <li><a href="#tab3">Tab Name 3</a></li>
</ul>
<div class="tab_content">
    <div id="tab1" class="tab active">
        <h2>Heading Tab 01</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae eleifend est, vitae convallis massa. Pellentesque vel est non purus consequat porta ut quis lacus. Vivamus placerat tempor mauris a aliquam. Vestibulum non tortor massa. Aenean gravida condimentum arcu, ac posuere justo rhoncus vel. Integer efficitur lacinia libero et sodales. Vivamus posuere blandit justo, ut placerat nibh aliquam non. Curabitur id nisl et libero laoreet luctus.</p>
    </div><!-- .tab -->
    <div id="tab2" class="tab">
        <h2>Heading Tab 02</h2>
        <p>IEtiam aliquet condimentum consectetur. Aliquam vel lorem elit. Aliquam in ligula eget erat malesuada iaculis. Proin mattis eu urna non lacinia. Praesent convallis efficitur quam. Praesent quis leo lobortis enim convallis condimentum. Vivamus molestie eros id mi aliquam efficitur. Aliquam id libero quis nisl porttitor aliquet. </p>
    </div><!-- .tab -->
    <div id="tab3" class="tab">
        <h2>Heading Tab 03</h2>
        <p>Sed suscipit feugiat leo ac vehicula. Nulla facilisi. Sed ultrices hendrerit felis nec eleifend. Etiam fermentum placerat ex, vel egestas dui eleifend posuere. Curabitur pharetra nunc ligula, vitae pulvinar metus eleifend non. Integer molestie tellus neque, ac varius ligula ornare eu. Cras eu ex et lorem euismod rutrum ut ac quam. Sed iaculis egestas quam, ac dignissim lorem volutpat at. Integer hendrerit ipsum justo, sed pulvinar elit congue pellentesque. Morbi non iaculis urna. </p>
    </div><!-- .tab -->
</div><!-- .tab_content -->
</div><!-- .tabs_wrap -->

Value of href should be the same as the id of its respected tab DIV with adding “#” in the beginning.

Complete CSS Code

body {
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
	background:#bde2e4;
	color:#2d2c28;
	margin:0;
	padding:0;
}

a,a:visited {
	color:#6d9a9c;
	outline:none;
}

h2 {
	margin-top:0;
	font-size:17px;
}

.tabs_wrap {
	width:960px;
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
	background:#bde2e4;
	color:#2d2c28;
	margin:0 auto;
	padding:30px 0;
}

.tabs_nav {
	list-style:none;
	margin:0;
	padding:0;
}

.tabs_nav li {
	display:inline;
}

.tabs_nav a {
	display:inline-block;
	height:36px;
	line-height:36px;
	background:#e7f2f2;
	color:#879291;
	text-decoration:none;
	font-weight:700;
	border-radius:8px 8px 0 0;
	margin:0 2px 0 0;
	padding:0 20px;
}

.tabs_nav li.active a,.tabs_nav a:hover {
	background:#fff;
	text-decoration:none;
}

.tab_content {
	background:#fff;
	overflow:hidden;
	line-height:21px;
	box-shadow:1px 1px 2px #8bb7b9;
}

.tab_content p {
	margin-bottom:0;
}

.tab {
	display:none;
	padding:20px;
}

.tab h2 {
	margin-top:0;
	font-size:16px;
	color:#6d9a9c;
}

.tab.active {
	display:block;
}

Complete jQuery Code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
    jQuery('.tabs_nav a').on('click', function(e)  {
        var targetTab = jQuery(this).attr('href');
        jQuery(targetTab).show().siblings().hide();
	     jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
         e.preventDefault();
    });
});
</script>

You can download the complete code for “Creating Simple Tabs HTML, CSS & jQuery” from the sidebar.

Main source for this tutorial: Tutorial

OTallu