// HTML code for tabs panel.
<section class="content"><!--bof page Content-->
<!--eof page Content Left-->
<section class="CommenRow">
<article class="tabDiv">
<div class="cornerT"><img class="cornerright" src="images/corner/redCorTR.gif" alt=""></div>
<div class="tabCont">
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">City</a></li>
<li><a href="#" rel="country2">State</a></li>
<li><a href="#" rel="country3">Country</a></li>
</ul>
<div style="background:#ffffff; padding: 10px">
<div id="country1" class="tabcontent">
<ul class="tabListNew">
<li>
<div class="right">
<h2>ABC</h2>
<h3>ABCD</h3>
<p>Lorem Ipsum is simply dummy text of the industry.<br>
Lorem Ipsum is simply dummy text of the industry.
</p>
</div>
<div class="clear"></div>
</li>
<li>
<div class="right">
<h2>ABC</h2>
<h3>ABCD</h3>
<p>Lorem Ipsum is simply dummy text of the industry.<br>
Lorem Ipsum is simply dummy text of the industry.
</p>
</div>
<div class="clear"></div>
</li>
<li>
<div class="right">
<h2>ABC</h2>
<h3>ABCD</h3>
<p>Lorem Ipsum is simply dummy text of the industry.<br>
Lorem Ipsum is simply dummy text of the industry.
</p>
</div>
<div class="clear"></div>
</li>
<li class="last">
<div class="right">
<h2>ABC</h2>
<h3>ABCD</h3>
<p>Lorem Ipsum is simply dummy text of the industry.<br>
Lorem Ipsum is simply dummy text of the industry.
</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div id="country2" class="tabcontent">
<ul class="tabListNew">
<li>
<div class="right">
<h2>ABC</h2>
<h3>ABCD</h3>
<p>Lorem Ipsum is simply dummy text of the industry.<br>
Lorem Ipsum is simply dummy text of the industry.
</p>
</div>
<div class="clear"></div>
</li>
<li>
<div class="right">
<h2>ABC</h2>
<h3>ABCD</h3>
<p>Lorem Ipsum is simply dummy text of the industry.<br>
Lorem Ipsum is simply dummy text of the industry.
</p>
</div>
<div class="clear"></div>
</li>
<li>
<div class="right">
<h2>ABC</h2>
<h3>ABCD</h3>
<p>Lorem Ipsum is simply dummy text of the industry.<br>
Lorem Ipsum is simply dummy text of the industry.
</p>
</div>
<div class="clear"></div>
</li>
<li class="last">
<div class="right">
<h2>ABC</h2>
<h3>ABCD</h3>
<p>Lorem Ipsum is simply dummy text of the industry.<br>
Lorem Ipsum is simply dummy text of the industry.
</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div id="country3" class="tabcontent">
<ul class="tabListNew">
<li>
<div class="right">
<h2>ABC</h2>
<h3>ABCD</h3>
<p>Lorem Ipsum is simply dummy text of the industry.<br>
Lorem Ipsum is simply dummy text of the industry.
</p>
</div>
<div class="clear"></div>
</li>
<li>
<div class="right">
<h2>ABC</h2>
<h3>ABCD</h3>
<p>Lorem Ipsum is simply dummy text of the industry.<br>
Lorem Ipsum is simply dummy text of the industry.
</p>
</div>
<div class="clear"></div>
</li>
<li>
<div class="right">
<h2>ABC</h2>
<h3>ABCD</h3>
<p>Lorem Ipsum is simply dummy text of the industry.<br>
Lorem Ipsum is simply dummy text of the industry.
</p>
</div>
<div class="clear"></div>
</li>
<li class="last">
<div class="right">
<h2>ABC</h2>
<h3>ABCD</h3>
<p>Lorem Ipsum is simply dummy text of the industry.<br>
Lorem Ipsum is simply dummy text of the industry.
</p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<p><a href="javascript:countries.cycleit('next')" style="margin-right: 25px; float:right; text-decoration:none"><<a href="http://chandreshmaheshwari.files.wordpress.com/2011/06/tabcontent.png"><img src="http://chandreshmaheshwari.files.wordpress.com/2011/06/tabcontent.png?w=280" alt="tabContent" title="tabContent" width="280" height="300" class="size-medium wp-image-342" /></a> src="images/scroll_right.png" alt=""></a></p>
<div class="clear"></div>
</div>
<div class="cornerB"><img class="cornerright" src="images/corner/redCorBR.gif" alt=""></div>
<div class="clear"></div>
</article>
</section>
<!--eof page Content Right-->
<p class="clear"></p>
</section>
Image view of the tabs panel
You can download complete tabcontent.zip (.HTML, .JS, .CSS and images) from the right panel (Source files) of this blog’s
Thanks.
Pingback: Jquery Panel tabs - Programmers Goodies
Just want to say your article is as astounding. The clearness in your post is simply nice and i could assume you are an expert on this subject. Well with your permission let me to grab your feed to keep updated with forthcoming post. Thanks a million and please keep up the enjoyable work.
We agree with you thought on Green and the rest.
I am going to go ahead and bookmark this content for my sis for the research project for school. This is a appealing website by the way. Where did you get a hold the template for this webpage?
That is really fascinating. It offered me numerous tips and I will be posting them on my net website soon. I will bookmarking your website and I will be back again. Give thanks to you once again!
Nice article.
Thank you bro.