dima018,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.header {
width: 508px;
color: #fff;
font-family: Georgia;
font-size: 14px;
}
.header {
position: relative;
width: 488px;
border: 2px solid #3F3F3F;
padding: 8px;
font-weight: bold;
margin-top: 5px;
cursor: pointer;
background: url(http://jemand.ru/examples/images/raskryvayushhiesya-bloki-div-na-javascript/header.png);
text-align: center;
}
.header:hover {
background: url(http://jemand.ru/examples/images/raskryvayushhiesya-bloki-div-na-javascript/header_over.png);
color: #B7B7B7;
}
.content {
overflow: hidden;
transition: height 1s;
height: 0;
}
.text {
width: 474px;
border: 2px solid #3F3F3F;
border-top: none;
padding: 15px;
text-align: left;
background: #7F7F7F;
}
.header:after{
position: absolute;
top: 5px;
right: 5px;
content: "\25BC";
color: #fff;
}
.header.open:after{
content: "\25B2";
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var header = [].slice.call(document.querySelectorAll(".header"), 0);
var content = [].slice.call(document.querySelectorAll(".content"), 0);
header.forEach(function(item, i) {
item.addEventListener("click", function() {
item.classList.toggle("open");
var text = content[i];
var height = item.classList.contains("open") ? text.scrollHeight : 0;
text.style.height = height + "px";
});
});
});
</script>
</head>
<body>
<div class="header" id="1-header">Первый блок</div>
<div class="content" id="1-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
<div class="header" id="2-header">Второй блок</div>
<div class="content" id="2-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
<div class="header" id="3-header">Третий блок</div>
<div class="content" id="3-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
<div class="header" id="4-header">Четвертый блок</div>
<div class="content" id="4-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
<div class="header" id="5-header">Пятый блок</div>
<div class="content" id="5-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
</body>
</html>