Вложенные переключаемые вкладки

by Dimox

HTML

<div class="section">

   <ul class="tabs">
     <li class="current">First tab</li>
     <li>Second tab</li>
     <li>Third tab</li>
     <li>Fourth tab</li>
   </ul>

   <div class="box visible">

     <!-- Inner Tabs -->
     <div class="section">
       <ul class="tabs">
         <li class="current">Inner tab 1</li>
         <li>Inner tab 2</li>
       </ul>
       <div class="box visible">
         <h2>inner 1</h2>
         <p>Lorem ipsum dolor sit amet consectetuer eros odio vestibulum ipsum Aenean. Odio iaculis ut enim nulla tortor vitae mauris sed a velit. Eu Donec Cras non Phasellus lorem magna sem turpis commodo Donec. Urna augue odio tincidunt lacinia nulla Nam Curabitur Aliquam Nulla Donec. Condimentum urna pellentesque congue ridiculus condimentum Integer tortor quis hac nec. Turpis in congue risus.</p>
       </div>
       <div class="box">
         <h2>inner 2</h2>
         <p>Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.</p>
       </div>
     </div>
     <!-- End Inner Tabs -->

     <h2>1</h2>
     <p>Diam quis magna convallis mauris ipsum lorem sed Morbi diam Sed. Quam mi id consequat tincidunt malesuada Pellentesque a parturient amet quis. Nibh nibh est pretium tellus diam sit eu risus suscipit mauris. Integer pretium eget tellus convallis volutpat id ipsum quis enim pretium. Molestie Morbi Nam nibh In fringilla et semper adipiscing metus nisl. Quisque pretium turpis risus fames ut ut amet montes.</p>
   </div>

   <div class="box">
     <h2>2</h2>
     <p>Lorem ipsum dolor sit amet consectetuer eros odio vestibulum ipsum Aenean. Odio iaculis ut enim nulla tortor vitae mauris sed a...

CSS

.section {
    background: #EFEFEF;
    margin: 0 0 30px;
}
.box .section {
    margin: 15px 0;
}
ul.tabs {
    height: 28px;
    line-height: 25px;
    list-style: none;
    border-bottom: 1px solid #DDD;
    background: #FFF;
}
.tabs li {
    float: left;
    display: inline;
    margin: 0 1px -1px 0;
    padding: 0 13px 1px;
    color: #777;
    cursor: pointer;
    background: #F9F9F9;
    border: 1px solid #E4E4E4;
    border-bottom: 1px solid #F9F9F9;
    position: relative;
}
.tabs li:hover {
    color: #F70;
    padding: 0 13px;
    background: #FFFFDF;
    border: 1px solid #FFCA95;
}
.tabs li.current {
    color: #444;
    background: #EFEFEF;
    padding: 0 13px 2px;
    border: 1px solid #D4D4D4;
    border-bottom: 1px solid #EFEFEF;
}
.box {
    display: none;
    border: 1px solid #D4D4D4;
  border-width: 0 1px 1px;
    background: #EFEFEF;
    padding: 0 12px;
}
.box.visible {
    display: block;
}

JavaScript

(function($) {
   $(function() {

     $('ul.tabs').delegate('li:not(.current)', 'click', function() {
       $(this).addClass('current').siblings().removeClass('current')
         .parents('div.section').eq(0).find('>div.box').hide().eq($(this).index()).show();
     })

   })
})(jQuery)