Nav

<style> /* Основний контейнер */

1. toc {

 width: 90%;
 max-width: 28em;
 margin: 0 auto 1em auto;
 background: rgba(135,206,250,0.1);
 padding: 0.8em;
 border: 1px solid #007BFF;
 border-radius: 10px;
 font-size: 1rem;
 line-height: 1.35;
 box-sizing: border-box;

}

/* Приховування підпунктів на мобільних */ @media (max-width: 768px) {

 .toc ul ul { 
   display: none; 
   padding-left: 1em;
 }
 .toc li.expandable > span {
   cursor: pointer;
   display: inline-block;
   position: relative;
   padding-right: 1.2em;
 }
 .toc li.expandable > span::after {
   content: "▶";
   position: absolute;
   right: 0;
   transition: transform 0.2s ease;
 }
 .toc li.expandable.open > span::after {
   transform: rotate(90deg);
 }
 .toc li.expandable.open > ul {
   display: block;
 }

} </style>

<script> // JS для відкриття/закриття підпунктів на мобільних document.querySelectorAll('#toc li.expandable > span').forEach(item => {

 item.addEventListener('click', () => {
   item.parentElement.classList.toggle('open');
 });

}); </script>