я недавно начал заниматься программированием и столкнулся с этой проблемой-не работает раскрывающийся блок. Я хочу, чтобы при нажатии на конкретную услугу, появлялось поле, где будет текст с информацией о ней. Буду благодарен, если укажите на мою ошибку или не доделанную работу. Ещё сильнее буду благодарен, если подскажите хорошею литературу по созданию сайтов или html/css.
<header>
<ul class="main-menu">
<li class="active"><a href="#url">Главная</a></li>
<li class="menu-children">
<a href="#url">Услуги</a>
<ul>
<li><a href="#url">Сопровождение клиента по спорам, вытекающим из ФЗ "О защите прав потребителей</a></li>
<li><a href="#url">Взыскание части страховой премии в связи с долгосрочной оплаты потребительского кредита</a></li>
<div class="content">
<p>I am the best fotball player.</p>
</div>
<li><a href="#url">Взыскание части страховой премии в связи с долгосрочной оплаты потребительского кредита123</a></li>
<li><a href="#url">Взыскание части страховой премии в связи с долгосрочной оплаты потребительского кредита1234</a></li>
<li><a href="#url">Взыскание части страховой премии в связи с долгосрочной оплаты потребительского кредита12345</a></li>
<li><a href="#url">Взыскание части страховой премии в связи с долгосрочной оплаты потребительского кредита123456</a></li>
<li><a href="#url">Взыскание части страховой премии в связи с долгосрочной оплаты потребительского кредита1234567</a></li>
<li><a href="#url">Взыскание части страховой премии в связи с долгосрочной оплаты потребительского кредита12345678</a></li>
<li><a href="#url">Взыскание части страховой премии в связи с долгосрочной оплаты потребительского кредита123456789</a></li>
<li><a href="#url">Взыскание части страховой премии в связи с долгосрочной оплаты потребительского кредита1234567890</a></li>
<li><a href="#url">Взыскание части страховой премии в связи с долгосрочной оплаты потребительского кредита123456789010</a></li>
<script>
Let coll=document.getElementByClassName('main-menu');
for (Let i=0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active');
Let content=this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight=null;
} else {
content.style.maxHeight=content.scrollHeight + 'px'
}
})
}
</script>
<li class="menu-children">
<a href="#url">Подразделы</a>
<ul>
<li><a href="#url">Подраздел 1</a></li>
<li><a href="#url">Подраздел 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#url">Новости</a></li>
<li><a href="#url">Фотогалерея</a></li>
<li><a href="#url">Контакты</a></li>
</ul>
