Javany11,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div{
border:1px double #000;
width: 220px;
padding:5px;
color: #004485;
}
.head{
background-color: #004485;
color: #fff;
}
.yellou{
color: #D58B44;
font-weight: bold;
}
.foot{
display: block;
}
.nofoot{
display: none;
}
</style>
<body>
<div class="head"><span class ="bo" rel="">-</span> Последние обновления </div>
<div class="foot">
<span class="yellou">[8.05.2004]</span>
Последнее обновление софта<br>
<span class="yellou">[2.05.2004]</span>
В разделе "Документация" появился новый урок посвященный использованию MentalRay
<span class="yellou">[1.05.2004]</span>
Добавлены 5 изображений в нашу галерею
</div>
<div class="head"><span class ="bo" rel="">-</span> Погода в Одессе </div>
<div class="foot">
<span class="yellou">Днем:</span>+10 - +15. Пасмурно, небольшие но противные осадки...<br>
<span class="yellou">Ночью:</span> как получится... :)
</div>
<div class="head"><span class ="bo" rel="">-</span> Статистика </div>
<div class="foot">
Всего посещений:34521<br>
Из них сегодня:21
</div>
<script>
"use strict"
var heads = document.querySelectorAll('.head');//забираем в массив
var foots = document.querySelectorAll('.foot');//забираем в массив
var boo = document.querySelectorAll('.bo');//забираем в массив
[].forEach.call(heads, function(item,i) {
item.addEventListener('click', function() {
foots[i].classList.toggle('nofoot')//меняем foot на nofoot
boo[i].innerHTML=["-","+"][+foots[i].classList.contains("nofoot")];
});
});
console.log(heads);
console.log(foots);
console.log(boo);
</script>
</body>
</html>