diff --git a/css/styles.css b/css/styles.css index c91f160..d5ca534 100644 --- a/css/styles.css +++ b/css/styles.css @@ -84,6 +84,7 @@ a:hover { text-decoration: underline; } .wiki-topic { margin-bottom: 16px; } .wiki-topic h4 { font-size: 1.1rem; font-weight: 600; padding: 12px 16px; background: var(--gray1); border-radius: 8px; cursor: pointer; transition: background .2s; } .wiki-topic h4:hover { background: var(--gray2); } +.wiki-subtopics { padding-left: 24px; margin-top: 8px; } .wiki-subtopic { margin-left: 24px; border-left: 2px solid var(--gray2); padding-left: 16px; } .wiki-subtopic.hidden { display: none; } .wiki-subtopic-title { font-weight: 600; padding: 8px 0; cursor: pointer; } diff --git a/js/main.js b/js/main.js index 335fdae..d76359c 100644 --- a/js/main.js +++ b/js/main.js @@ -332,13 +332,20 @@ async function loadWiki() { const topicDiv = document.createElement('div'); topicDiv.className = 'wiki-topic'; topicDiv.innerHTML = ` -

${topicName}

-

${topicName}

+

${topicName}

+

${topicName}

`; wikiContainer.appendChild(topicDiv); const subtopicsDiv = topicDiv.querySelector('.wiki-subtopics'); + const topicTitle = topicDiv.querySelector('.topic-title'); + + // Toggle topic on click + topicTitle.onclick = () => { + subtopicsDiv.classList.toggle('hidden'); + }; + subtopics.forEach(sub => { const subtopicDiv = document.createElement('div'); subtopicDiv.className = 'wiki-subtopic hidden'; @@ -353,7 +360,8 @@ async function loadWiki() { subtopicsDiv.appendChild(subtopicDiv); const title = subtopicDiv.querySelector('.wiki-subtopic-title'); - title.onclick = () => { + title.onclick = (e) => { + e.stopPropagation(); // Close all other subtopics first subtopicsDiv.querySelectorAll('.wiki-subtopic').forEach(s => { if (s !== subtopicDiv) s.classList.add('hidden');