<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<style>
.hidden {
display: none;
}
span {
cursor: pointer;
}
</style>
<div>
<span>
<span class="arrows">▶</span>
<span class="arrows hidden">▼</span>
Сладости</span
>
<ul class="hidden">
<li>Пирожное</li>
<li>Пончик</li>
<li>Мёд</li>
</ul>
</div>
<div>
<span>
<span class="arrows">▶</span>
<span class="arrows hidden">▼</span>
Мясо</span
>
<ul class="hidden">
<li>Баранина</li>
<li>Свинина</li>
<li>Говядина</li>
</ul>
</div>
<div>
<span>
<span class="arrows">▶</span>
<span class="arrows hidden">▼</span>
Рыба
</span>
<ul class="hidden">
<li>Красная</li>
<li>Белая</li>
</ul>
</div>
<script>
console.log('----');
let titles = document.querySelectorAll('div > span');
for (let title of titles) {
title.onclick = function() {
title.children[0].classList.toggle('hidden');
title.children[1].classList.toggle('hidden');
title.nextElementSibling.classList.toggle('hidden');
};
}
</script>
</body>
</html>