Simple Twist Tab

//include Js file
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

//Js

<script>
//infotwistsolutions.com
//Sanu A.S
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
 $('ul.ttabs').each(function(){
  // For each set of tabs, we want to keep track of
  // which tab is active and it's associated content
  var $active, $content, $links = $(this).find('a');

  // If the location.hash matches one of the links, use that as the active tab.
  // If no match is found, use the first link as the initial active tab.
  $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
  $active.addClass('active');
  $content = $($active.attr('href'));

  // Hide the remaining content
  $links.not($active).each(function () {
   $($(this).attr('href')).hide();
  });

  // Bind the click event handler
  $(this).on('click', 'a', function(e){
   // Make the old tab inactive.
   $active.removeClass('active');
   $content.hide();

   // Update the variables with the new link and content
   $active = $(this);
   $content = $($(this).attr('href'));

   // Make the tab active.
   $active.addClass('active');
   $content.show();

   // Prevent the anchor's default click action
   e.preventDefault();
  });
 });
});
</script>

// CSS

<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, footer {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 vertical-align: baseline
}
ul, ol {
 list-style-type: none;
}
strong {
 font-weight: bold;
 color: #000;
}
p {
 font-size: 14px;
 color: #666;
 line-height: 1.3em;
}
/* Simple Tab - blog.infotwistsolutions.com */
.ttabs li {
 list-style: none;
 display: inline;
}
.ttabs a {
 padding: 5px 10px;
 display: inline-block;
 background: #95ba3b;
 color: #fff;
 text-decoration: none;
 -webkit-border-top-left-radius: 5px;
 -moz-border-radius-topleft: 5px;
 border-top-left-radius: 5px;
}
.ttabs a.active {
 color: #000;
 background-color: #CCC;
}
#tab1, #tab2, #tab3, #tab4, #tab5 {
 border: 1px dashed #CCC;
 padding-top: 10px;
 padding-right: 20px;
 padding-bottom: 10px;
 padding-left: 20px;
 -webkit-box-shadow: 0 8px 6px -6px gray;
 -moz-box-shadow: 0 8px 6px -6px gray;
 box-shadow: 0 8px 6px -6px gray;
}
/* End Simple Tab */
</style>

//HTML

<ul class='ttabs'>

<li><a href="#tab1">Tab1</a></li>

<li><a href="#tab2">Tab2</a></li>

<li><a href="#tab3">Tab3</a></li>

</ul>

<div id='tab1'> <strong>Tab1</strong>

<p>Sample content...</p>

</div>

<div id='tab2'> <strong>Tab2</strong>

<p>Sample content...</p>

</div>

<div id='tab3'> <strong>Tab3</strong>

<p>Sample content...</p>

</div> 

Please like and share my blog..