Fix wiki accordion: topics first, then subtopics, then wiki text
This commit is contained in:
+30
-10
@@ -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');
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user