Its been easy now to have cookie based tabs using jQuery!

Demo

Follow the instructions and you are done 🙂

HTML

<div id="profileTabList">
  <a href="#ambedkar">Dr. Ambedkar</a>
  <a href="#buddha">Buddha</a>
  <a href="#navayan">Navayan</a>
</div>
<div id="profileTabData">
  <div id="ambedkar">
    <h2>" Men are mortal. So are ideas. An idea needs propagation as much as a plant needs watering. Otherwise both will wither and die. "</h2>
  </div>
  <div id="buddha">
    <h2>" Better than a thousand hollow words, is one word that brings peace. "</h2>
  </div>
  <div id="navayan">
    <h2>" In today's date every movement must stay online. Else it is like a bird with brocken arms! "</h2>
    <h2>- <a href="http://www.navayan.com/" target="_blank">Navayan.com - Homeland of Ambedkarite Buddhist!</a></h2>
  </div>
</div>

CSS

.tabs a{
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  border-radius: 14px;
  padding:6px 12px;
  font-weight: 700;
  text-decoration: none;
  color: #06e;
}
.tabs .active{
  color:#fff;
  background: #06a;        
}
#profileTabList{
  min-width: 270px;
  padding: 12px 30px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ccc;
  background:#efefef;
  background-image: -o-linear-gradient(top,#fff,#efefef);
  background: -moz-linear-gradient(center top , #fff, #efefef) repeat scroll 0 0 transparent;
  background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#efefef));
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffffff',EndColorStr='#efefef');
}
.tab_content{
  display:none;
  clear:both;
  padding: 22px 30px;
}

Javascript

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://www.navayan.com/js/jquery.cookie.js"></script>
<script src="http://cookie-based-jquery-tabs.googlecode.com/files/cookie-based-jquery-tabs.js"></script>

That’s all !

Demo

You might also like:

Related Post