Табы и вкладки Jquery

HTML

<p>Горизонтальные вкладки</p>
<dl class='tab horizontal'>
    <dt class='active'>Заголовок 1</dt>
    <dd>Текст вкладки</dd>
    <dt>Заголовок2</dt>
    <dd>
        <dl class='tab horizontal'>
            <dt>Заголовок 1</dt>
            <dd>Внутрення 1</dd>
            <dt class="active">Заголовок2</dt>
            <dd>Текст вкладки 2</dd>
            <dt>Заголовок 3</dt>
            <dd>Текст вкладки 3</dd>
        </dl>
    </dd>
    <dt>Заголовок 3</dt>
    <dd>
        <dl class='tab vertical'>
            <dt class='active'>Заголовок 1</dt>
            <dd>Текст вкладки</dd>
            <dt>Заголовок2</dt>
            <dd>Текст вкладки 2</dd>
            <dt>Заголовок 3</dt>
            <dd>Текст вкладки 3</dd>
        </dl>
    </dd>
</dl>
<p>Вертикальные вкладки</p>
<dl class='tab vertical'>
    <dt class='active'>Заголовок 1</dt>
    <dd>Текст вкладки</dd>
    <dt>Заголовок2</dt>
    <dd>
        <dl class='tab horizontal'>
            <dt class='active'>Заголовок 1</dt>
            <dd>Текст вкладки</dd>
            <dt>Заголовок2</dt>
            <dd>Текст вкладки 2</dd>
            <dt>Заголовок 3</dt>
            <dd>Текст вкладки 3</dd>
        </dl>
    </dd>
    <dt>Заголовок 3</dt>
    <dd>
        <dl class='tab vertical'>
            <dt class='active'>Заголовок 1</dt>
            <dd>Текст вкладки</dd>
            <dt>Заголовок2</dt>
            <dd>Текст вкладки 2</dd>
            <dt>Заголовок 3</dt>
            <dd>Текст вкладки 3</dd>
        </dl>
    </dd>
</dl>
<p>Fedor Vlasenko, [email protected]</p>

CSS

/* Горизонтальные horizontal */
.tab.horizontal {
width:100%;
overflow:hidden;
font-size:14px;
margin:2em 0;
zoom:1;
padding:1px;
position:relative;

}
.tab.horizontal>dt {
float:left;
line-height:2;
height:2em;
border: 1px solid #AAA;
color: #282D31;
border-bottom:0;
padding:0 1em;
position:relative;
left:35px;
margin-right:3px;
border-radius: 3px 3px 0 0;
cursor:pointer;
}
.tab.horizontal>dt:hover, .tab.horizontal>dt.active{
background-color: #eee;    
}
.tab.horizontal>dt.active {
z-index:3;
cursor:auto;
}
.tab.horizontal>dd {
float:right;
width:100%;
margin:2em 0 0 -100%;
position:relative;
z-index:2;
display: none;
}
.tab.horizontal>dt.active + dd{
display:block;
}
.tab.horizontal>dd>div.tab-content {
border: 1px solid #AAA;
border-radius: 3px;
padding:10px;
}
/* Вертикальные vertical*/
.tab.vertical{
    border: 1px solid #AAA;
    border-top: none;
}
.tab.vertical>dd{
    background:#fff;
    display:none;
    width:100%;
    z-index:2;
    margin: 0;
    
}
.tab.vertical>dd>div.tab-content{
    padding: 5px 10px;
    border-top: 1px solid #AAA;
}
.tab.vertical>dt{
    padding: 5px 10px;
    cursor:pointer;
    background-color: #F9F9F9;
	border-top: 1px solid #AAA;
}
.tab.vertical>dt.active, .tab.vertical>dt:hover {
	background-color: #eee;
}
.tab.vertical>dt.active + dd{
    display:block;
}
.tab.vertical{
    margin: 0;
    zoom:1;
    width:100%;
}
.tab.vertical>dt.active  {
z-index:3;
cursor:auto;
}

JavaScript

(function(f){    
    f('dl.tab').on('click', 'dt', function () {
        f(this).addClass('active').siblings().removeClass('active'); 
    }).children('dd').each(function () {
        f(this).wrapInner('<div class="tab-content"></div>');
    });
}(jQuery));