How I Did That - Why 'How I Did That'

« Back

Simple jQuery Tabs

Posted by: mark | May 4, 2013 | Category: jQuery

Some times you just need some content in what is commonly known as tabs, content in 'boxes' where all but one is hidden and when you click on one of the tabs its 'box' shows its content.

Some times you just need some content in what is commonly known as tabs, content in 'boxes' (all but one is hidden) that have tabs that when clicked they show the content of that 'box'.

Here is the code I use with the CSS. I've used this in many forms, CGBlog archives split into years (you could do categories) is one I did recently, shown on the right side here under Archives.

The example uses a color #CCC for the background instead of an image.

Example

Code

Call the jQuery and javascript function
 
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
 or
<script type="text/javascript" src='uploads/jquery/jquery-1.8.3.min.js'></script>

<script type="text/javascript">
$(document).ready(function(){
  $( '#info .hide' ).show();
  $( '#info .hide:not(:first)' ).hide();  
  $('#info-nav li').click(function(e) {
    $('#info .hide').hide();
    $('#info-nav .current').removeClass("current");
    $(this).addClass('current');    
    var clicked = $(this).find('a:first').attr('href');
    $('#info ' + clicked).fadeIn('fast');
    e.preventDefault();
  }).eq(0).addClass('current');
});
</script>

/* -------- HTML -------- */

<ul id="info-nav">
<li><a href="#y2013">2013</a></li>
<li><a href="#y2012">2012</a></li>
</ul>
<div id="info">
<div id="y2013" class="hide">{CGBlog action="archive" year='2013'}</div>
<div id="y2012" class="hide">{CGBlog action="archive" year='2012'}</div>
</div>


/* -------- This is the CSS I used -------- */

#info {
	width: 90%;
	border: 1px solid #999;
	padding: 0 10px;
/* Rounded corners - all but the top left corner */
	-moz-border-radius: 0px 7px 7px 7px;
	-webkit-border-radius: 0px 7px 7px 7px;
	-o-border-radius: 0px 7px 7px 7px;
	-ms-border-radius: 0px 7px 7px 7px;
	border-radius: 0px 7px 7px 7px;
	background: url(../../uploads/buzz/content_bg.png) repeat;
}
#info .hide {
	width: inherit;
	padding: 6px 0 0;
	background-color: inherit;
}
#info-nav {
	margin: 0;
	padding: 3px 0;
	width: 100%;
	list-style: none;
}
#info-nav li {
	display: inline;
	ackground: #ccc;
	border: 1px solid #888;
	border-bottom: none;
	margin: 0 2px 0 0;
	padding: 3px 4px;
/* Rounded corners - only the top 2 corners */
	-moz-border-radius: 4px 4px 0px 0px;
	-webkit-border-radius: 4px 4px 0px 0px;
	-o-border-radius: 4px 4px 0px 0px;
	-ms-border-radius: 4px 4px 0px 0px;
	border-radius: 4px 4px 0px 0px;
}
#info-nav li a:hover {
	color:;
}
#info-nav li.current {
	padding-bottom: 4px;
	background: url(../../uploads/buzz/content_bg.png) repeat;
}
#info-nav li.current a {
	color: #F44895;
}

^ Top