Panel Tabs content using jQuery


// 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>

tabContent

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.

About these ads

6 Comments

  1. Pingback: Jquery Panel tabs - Programmers Goodies

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s