Add topic title click to open/close subtopics

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; }

js/main.js

@@ -332,13 +332,20 @@ async function loadWiki() {
         const topicDiv = document.createElement('div');
         topicDiv.className = 'wiki-topic';
         topicDiv.innerHTML = `
-          <h4 class="hide-de">${topicName}</h4>
-          <h4 class="hide-en">${topicName}</h4>
+          <h4 class="hide-de topic-title">${topicName}</h4>
+          <h4 class="hide-en topic-title">${topicName}</h4>
           <div class="wiki-subtopics"></div>
         `;
         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');