serggrodno,
пара сотен
открывашка может тоже самое
Закрытие блока по нажатию в любом месте
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #D2691E;
}
.tabs {
width: 100%;
height: 40px;
margin: 30px auto;
display: block;
}
.tabs__caption {
font-family: 'Roboto',Verdana,Helvetica,Arial,sans-serif;
font-size: 1.2em;
line-height: 39px;
list-style: none;
padding: 0;
margin: 0;
}
.tabs__caption li {
width: 100px;
display: inline;
padding: 0 30px 1px;
color: #A80000;
cursor: pointer;
background: #F9F9F9;
border: 1px solid #E4E4E4;
border-bottom: 1px solid #F9F9F9;
position: relative;
line-height: 30px;
}
.tabs__caption li:hover{
color: #F70;
background: #FFFFDF;
border-top: 1px solid #FFCA95;
border-left: 1px solid #FFCA95;
border-right: 1px solid #FFCA95;
line-height: 30px;
}
.tabs__caption .active {
color: #FFF;
background: rgb(255, 0, 0) none repeat scroll 0% 0%;
border: 1px solid #D4D4D4;
border-bottom: 1px solid #EFEFEF;
line-height: 30px;
}
.tabs__content {
display: none;
width: 100%;
height: 200px;
background-color: #FF1493;
}
.tabs__content.active {
display: block;
}
.tabs__content:nth-child(2){
background-color: #0000FF;
}
.tabs__content:nth-child(3){
background-color: #FFFF00;
} </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function($) {
$(function() {
$('.tabs').on('click', 'li', function(event) {
$(this).addClass('active').siblings().removeClass('active');
$('div.tabs__content', event.delegateTarget).not($('div.tabs__content', event.delegateTarget).eq($(this).index()).fadeIn()).hide();
});
});
})(jQuery);
</script>
</head>
<body>
<div class="tabs">
<ul class="tabs__caption">
<li class="active">Пункт 1</li><li class="">Пункт 2</li><li class="">Пункт 3</li>
</ul>
<div class="tabs__content active">
<div class="left">1 </div>
</div>
<div class="tabs__content">
<div class="сenter">2 </div>
</div>
<div class="tabs__content">
<div class="right">3</div>
</div>
</div>
</body>
</html>