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)
Expand for more options Login