Добрый день! Есть шесть дивов, при нажатии на див, тот див который под ним меняет класс, и соответственно принимает прописанные выше стилевые свойства к новому классу, при следующем клике, все возвращается назад. Но при клике на див, должен меняться "-" на "+" прописанный в span в этом диве. Помогите пожалуйста, вот чувствую что решение очень простое, а вот знаний и опыта мало очень. Спасибо.
<!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>
var heads = document.querySelectorAll('.head');//забираем в массив
var foots = document.querySelectorAll('.foot');//забираем в массив
var boo = document.querySelectorAll('.bo');//забираем в массив
for(let i=0;i<heads.length;i++){
heads[i].addEventListener('click',function(){
for(let j = 0; j<foots.length; j++){
foots[i].classList.toggle('nofoot')//меняем foot на nofoot
boo[i].innerHTML="<span>+</span>";
}
})
}
console.log(heads);
console.log(foots);
console.log(boo);