Cool jQuery tabs plugin

The Demo page: http://skaras85.webd.pl/jtabs/

Why this plugin is so cool?

• It's lightweight, minified js file is only 1048 b
• It's simple in usage
• It's written in HTML5
• You can nest one tab in another many times. It's like tab Inception, lol
• If you write a #id-of-some-tab on end of URL this tab will show opened

Instructions:

1. First, add the Javascript and CSS files to your project:

   <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   <script src="jTabs.jquery.js"></script>
   <link rel="stylesheet" href="jTabs.jquery.css">
   

2. Create HTML code:

   <section class="tabs">
       <nav>
           <ul>
               <li><a href="#first" class="chosenTab">first</a></li>
               <li><a href="#second">second</a></li>
           </ul>
       </nav>
       <div> 
           <article id="first">
               Content 1
           </article>
           <article class="tabHidden" id="second">
               Content 2
           </article>
       </div>
   </section>

3. Run plugin:

   $('.tabs').jTabs();

4. You can make vertical tabs by adding class .tabsVertical to section element:

   <section class="tabs tabsVertical">

5. You can nest one jTabs in a content of another:

   <section class="tabs">
       <nav>
           <ul>
               <li><a href="#first" class="chosenTab">first</a></li>
               <li><a href="#second">second</a></li>
           </ul>
       </nav>
       <div> 
           <article id="first">
               Content 1
           </article>
           <article class="tabHidden" id="second">
               <section class="tabs tabsVertical">
                   <nav>
                       <ul>
                           <li><a href="#sub-first" class="chosenTab">Sub-first</a></li>
                           <li><a href="#sub-second">sub-second</a></li>
                           <li><a href="#sub-third">sub-third</a></li>
                       </ul>
                   </nav>
                   <div> 
                       <article id="sub-first">
                           Subcontent 1
                       </article>
                       <article class="tabHidden" id="sub-second">
                           Subcontent 2
                       </article>
                       <article class="tabHidden" id="sub-third">
                           Subcontent 3
                       </article>
                   </div>
               </section>
           </article>
       </div>
   </section>