Vertical tabs
HTML
<div class="section vertical">
<ul class="tabs">
<li class="current">Первая вкладка</li>
<li>Вторая вкладка</li>
<li>Третья вкладка</li>
<li>Четвертая вкладка</li>
<li>Пятая вкладка</li>
<li>Шестая вкладка</li>
<li>Седьмая вкладка</li>
</ul>
<div class="box visible">
<p>параграф1</p>
</div>
<div class="box">
<p>параграф2</p>
</div>
<div class="box">
<p>параграф3</p>
</div>
<div class="box">
<p>параграф4</p>
</div>
<div class="box">
<p>параграф5</p>
</div>
<div class="box">
<p>параграф6</p>
</div>
<div class="box">
<p>параграф7</p>
<p>параграф7</p>
<p>параграф7</p>
<p>параграф7</p>
<p>параграф7</p>
<p>параграф7</p>
<p>параграф7</p>
<p>параграф7</p>
<p>параграф7</p>
<p>параграф7</p>
<p>параграф7</p>
</div>
</div>
CSS
.section {
width: 600px;
background: #EFEFEF;
margin: 20px auto;
padding: 0;
display: table;
border: 1px solid #E4E4E4;
}
.tabs {
display: table-cell;
vertical-align: top;
list-style: none;
border: 1px solid #DDD;
background: #F3F3F3;
width: 30%;
padding: 0;
margin: 0;
}
.tabs li {
display: inline-block;
width: calc(100% - 26px);
color: #777;
cursor: pointer;
background: #F9F9F9;
border: 1px solid #E4E4E4;
position: relative;
padding: 5px 13px;
margin: 1px -1px;
}
.tabs li:first-child{
margin-top: -2px;
}
.tabs li:last-child{
margin-bottom: -2px;
}
.tabs li:hover {
color: #F70;
background: #FFFFDF;
border: 1px solid #FFCA95;
}
.tabs li.current {
color: #444;
background: #EFEFEF;
border: 1px solid #D4D4D4;
border-right: 2px solid #EFEFEF;
}
.box {
display: none;
background: #EFEFEF;
padding: 15px;
}
.box.visible {
display: table-cell;
height: 100%;
}
JAVASCRIPT
(function($) {
$(function() {
$('ul.tabs').delegate('li:not(.current)', 'click', function() {
$(this).closest('.section').find('.visible').removeClass('visible');
$(this).addClass('current').siblings().removeClass('current')
.parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150).addClass('visible');
})
})
})(jQuery)
