Fix wiki accordion: topics first, then subtopics, then wiki text

This commit is contained in:
Kato
2026-09-03 21:39:14 +00:00
parent 77e6d921d6
commit 0cc668621f
+30 -10
View File
@@ -379,39 +379,59 @@ async function loadWiki() {
const subtopicsDiv = topicDiv.querySelector('.wiki-subtopics'); const subtopicsDiv = topicDiv.querySelector('.wiki-subtopics');
const topicTitle = topicDiv.querySelector('.topic-title'); const topicTitle = topicDiv.querySelector('.topic-title');
// Topics start collapsed // All topics start collapsed
subtopicsDiv.classList.add('hidden'); subtopicsDiv.classList.add('hidden');
// Toggle topic on click // Track open state for this topic
let isOpen = false;
let openSubtopicIndex = -1;
// Toggle topic: click opens/closes subtopics, closes other topics
topicTitle.onclick = () => { topicTitle.onclick = () => {
console.log('Topic clicked:', topicName, 'current hidden:', subtopicsDiv.classList.contains('hidden')); // Close all other topics first
if (subtopicsDiv.classList.contains('hidden')) { document.querySelectorAll('.wiki-subtopics:not(.hidden)').forEach(otherSubtopics => {
subtopicsDiv.classList.remove('hidden'); if (otherSubtopics !== subtopicsDiv) {
} else { otherSubtopics.classList.add('hidden');
}
});
if (isOpen) {
subtopicsDiv.classList.add('hidden'); subtopicsDiv.classList.add('hidden');
isOpen = false;
} else {
subtopicsDiv.classList.remove('hidden');
isOpen = true;
} }
}; };
subtopics.forEach(sub => { subtopics.forEach((sub, index) => {
const subtopicTitle = isEN && sub.subtopic_en ? sub.subtopic_en : sub.subtopic; const subtopicTitle = isEN && sub.subtopic_en ? sub.subtopic_en : sub.subtopic;
const subtopicContent = isEN && sub.wiki_en ? sub.wiki_en : sub.wiki; const subtopicContent = isEN && sub.wiki_en ? sub.wiki_en : sub.wiki;
const subtopicDiv = document.createElement('div'); const subtopicDiv = document.createElement('div');
subtopicDiv.className = 'wiki-subtopic'; subtopicDiv.className = 'wiki-subtopic';
subtopicDiv.innerHTML = ` subtopicDiv.innerHTML = `
<div class="wiki-subtopic-title">${subtopicTitle || ''}</div> <div class="wiki-subtopic-title">${subtopicTitle || ''}</div>
<div class="wiki-subtopic-content"> <div class="wiki-subtopic-content hidden">
<p>${subtopicContent || ''}</p> <p>${subtopicContent || ''}</p>
</div> </div>
`; `;
subtopicsDiv.appendChild(subtopicDiv); subtopicsDiv.appendChild(subtopicDiv);
const title = subtopicDiv.querySelector('.wiki-subtopic-title'); const title = subtopicDiv.querySelector('.wiki-subtopic-title');
const content = subtopicDiv.querySelector('.wiki-subtopic-content');
title.onclick = (e) => { title.onclick = (e) => {
e.stopPropagation(); e.stopPropagation();
// Close other subtopics in this topic
subtopicsDiv.querySelectorAll('.wiki-subtopic').forEach(s => { subtopicsDiv.querySelectorAll('.wiki-subtopic').forEach(s => {
if (s !== subtopicDiv) s.classList.add('hidden'); if (s !== subtopicDiv) {
s.querySelector('.wiki-subtopic-content').classList.add('hidden');
}
}); });
subtopicDiv.classList.toggle('hidden');
// Toggle this subtopic's content
content.classList.toggle('hidden');
}; };
}); });
} }