Add topic title click to open/close subtopics
This commit is contained in:
@@ -84,6 +84,7 @@ a:hover { text-decoration: underline; }
|
|||||||
.wiki-topic { margin-bottom: 16px; }
|
.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 { 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-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 { margin-left: 24px; border-left: 2px solid var(--gray2); padding-left: 16px; }
|
||||||
.wiki-subtopic.hidden { display: none; }
|
.wiki-subtopic.hidden { display: none; }
|
||||||
.wiki-subtopic-title { font-weight: 600; padding: 8px 0; cursor: pointer; }
|
.wiki-subtopic-title { font-weight: 600; padding: 8px 0; cursor: pointer; }
|
||||||
|
|||||||
+11
-3
@@ -332,13 +332,20 @@ async function loadWiki() {
|
|||||||
const topicDiv = document.createElement('div');
|
const topicDiv = document.createElement('div');
|
||||||
topicDiv.className = 'wiki-topic';
|
topicDiv.className = 'wiki-topic';
|
||||||
topicDiv.innerHTML = `
|
topicDiv.innerHTML = `
|
||||||
<h4 class="hide-de">${topicName}</h4>
|
<h4 class="hide-de topic-title">${topicName}</h4>
|
||||||
<h4 class="hide-en">${topicName}</h4>
|
<h4 class="hide-en topic-title">${topicName}</h4>
|
||||||
<div class="wiki-subtopics"></div>
|
<div class="wiki-subtopics"></div>
|
||||||
`;
|
`;
|
||||||
wikiContainer.appendChild(topicDiv);
|
wikiContainer.appendChild(topicDiv);
|
||||||
|
|
||||||
const subtopicsDiv = topicDiv.querySelector('.wiki-subtopics');
|
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 => {
|
subtopics.forEach(sub => {
|
||||||
const subtopicDiv = document.createElement('div');
|
const subtopicDiv = document.createElement('div');
|
||||||
subtopicDiv.className = 'wiki-subtopic hidden';
|
subtopicDiv.className = 'wiki-subtopic hidden';
|
||||||
@@ -353,7 +360,8 @@ async function loadWiki() {
|
|||||||
subtopicsDiv.appendChild(subtopicDiv);
|
subtopicsDiv.appendChild(subtopicDiv);
|
||||||
|
|
||||||
const title = subtopicDiv.querySelector('.wiki-subtopic-title');
|
const title = subtopicDiv.querySelector('.wiki-subtopic-title');
|
||||||
title.onclick = () => {
|
title.onclick = (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
// Close all other subtopics first
|
// Close all other subtopics first
|
||||||
subtopicsDiv.querySelectorAll('.wiki-subtopic').forEach(s => {
|
subtopicsDiv.querySelectorAll('.wiki-subtopic').forEach(s => {
|
||||||
if (s !== subtopicDiv) s.classList.add('hidden');
|
if (s !== subtopicDiv) s.classList.add('hidden');
|
||||||
|
|||||||
Reference in New Issue
Block a user