categoryHeaders.forEach(header => { header.style.cursor = 'pointer'; header.addEventListener('click', function(e) { e.preventDefault(); const categoryDiv = this.closest('.category-collapsible'); const contentDiv = categoryDiv.querySelector('.category-content'); const icon = this.querySelector('.collapse-icon'); if (contentDiv.style.display === 'none') { contentDiv.style.display = 'block'; icon.style.transform = 'rotate(0deg)'; } else { contentDiv.style.display = 'none'; icon.style.transform = 'rotate(-90deg)'; } }); }); const headings = content.querySelectorAll('h2, h3'); headings.forEach((heading, index) => { if (!heading.id) { heading.id = 'rule-section-' + index; } const li = document.createElement('li'); const a = document.createElement('a'); a.href = '#' + heading.id; if (heading.classList.contains('category-header')) { a.textContent = heading.querySelector('.category-title').textContent; } else { a.textContent = heading.textContent; } if (heading.tagName === 'H3') { a.classList.add('toc-subitem'); } a.addEventListener('click', (e) => { e.preventDefault(); const targetId = a.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); if (targetElement) { // Expand category if collapsed const categoryDiv = targetElement.closest('.category-collapsible'); if (categoryDiv) { const contentDiv = categoryDiv.querySelector('.category-content'); const icon = categoryDiv.querySelector('.collapse-icon'); if (contentDiv.style.display === 'none') { contentDiv.style.display = 'block'; icon.style.transform = 'rotate(0deg)'; } } const offsetPosition = targetElement.offsetTop - 100; window.scrollTo({ top: offsetPosition, behavior: 'smooth' }); } }); li.appendChild(a); toc.appendChild(li); }); searchInput.addEventListener('input', function(e) { const term = e.target.value.toLowerCase(); const tocLinks = toc.querySelectorAll('a'); headings.forEach(heading => { let sectionMatch = false; let nextElem = heading.nextElementSibling; let sectionText = ''; if (heading.classList.contains('category-header')) { sectionText = heading.querySelector('.category-title').textContent.toLowerCase(); const categoryDiv = heading.closest('.category-collapsible'); const contentDiv = categoryDiv.querySelector('.category-content'); sectionText += ' ' + contentDiv.textContent.toLowerCase(); } else { sectionText = heading.textContent.toLowerCase(); while(nextElem && !['H2', 'H3'].includes(nextElem.tagName)) { sectionText += ' ' + nextElem.textContent.toLowerCase(); nextElem = nextElem.nextElementSibling; } } if (sectionText.includes(term)) { const link = toc.querySelector(`a[href="#${heading.id}"]`); if(link) link.parentElement.style.display = 'block'; heading.style.opacity = '1'; // Expand category if search matches if (term !== '' && heading.classList.contains('category-header')) { const categoryDiv = heading.closest('.category-collapsible'); const contentDiv = categoryDiv.querySelector('.category-content'); const icon = categoryDiv.querySelector('.collapse-icon'); contentDiv.style.display = 'block'; icon.style.transform = 'rotate(0deg)'; } } else { const link = toc.querySelector(`a[href="#${heading.id}"]`); if(link) link.parentElement.style.display = 'none'; heading.style.opacity = '0.3'; } }); if (term === '') { headings.forEach(h => h.style.opacity = '1'); tocLinks.forEach(l => l.parentElement.style.display = 'block'); } }); window.addEventListener('scroll', () => { let current = ''; headings.forEach(heading => { const sectionTop = heading.offsetTop; if (scrollY >= sectionTop - 150) { current = heading.getAttribute('id'); } }); toc.querySelectorAll('a').forEach(a => { a.classList.remove('active'); if (a.getAttribute('href') === '#' + current && current !== '') { a.classList.add('active'); } }); }); });