Skip to content

Commit 4809204

Browse files
streamcode9claude
streamcode9
and
claude
authored
Add collapsible category lists to homepage (#41)
- Add toggle buttons for each category - Wrap subcategories and articles in expandable divs - Add CSS transitions for smooth collapse/expand animation - Add JavaScript to handle toggle state and aria-expanded attribute Co-authored-by: Claude <noreply@anthropic.com>
1 parent 2f194b4 commit 4809204

2 files changed

Lines changed: 185 additions & 116 deletions

File tree

‎assets/site.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,42 @@ main {
6565
padding: 1.5rem;
6666
}
6767

68+
section {
69+
margin-bottom: 1.5rem;
70+
}
71+
72+
.category-toggle {
73+
background: none;
74+
border: none;
75+
color: var(--primary-color);
76+
font-size: 1rem;
77+
cursor: pointer;
78+
padding: 0;
79+
margin-right: 0.5rem;
80+
vertical-align: middle;
81+
transition: transform 0.2s ease;
82+
}
83+
84+
.category-toggle:hover {
85+
opacity: 0.7;
86+
}
87+
88+
.category-toggle[aria-expanded="false"] {
89+
transform: rotate(-90deg);
90+
}
91+
92+
.category-content {
93+
overflow: hidden;
94+
transition: max-height 0.3s ease, opacity 0.3s ease;
95+
opacity: 1;
96+
max-height: 1000px;
97+
}
98+
99+
.category-content.collapsed {
100+
max-height: 0;
101+
opacity: 0;
102+
}
103+
68104
#posts-status {
69105
font-style: italic;
70106
}

‎index.html‎

Lines changed: 149 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -26,163 +26,196 @@
2626
<h1>Learn sleep repeat</h1>
2727

2828
<section>
29+
<button class="category-toggle" aria-expanded="true">▼</button>
2930
<h2>Creative Arts & Culture</h2>
30-
31-
<h3>Music</h3>
32-
<ul>
33-
<li><a href="/2024/11/05/music-theory.html">Music Theory</a></li>
34-
<li><a href="/2024/07/12/ukulele.html">Ukulele</a></li>
35-
<li><a href="/2024/07/12/ukulele-2.html">Ukulele 2 - Roy Smeck Method</a></li>
36-
<li><a href="/2024/07/02/music.html">Musicians & Artists</a></li>
37-
<li><a href="/2024/11/04/zemfira.html">Zemfira</a></li>
38-
</ul>
39-
40-
<h3>Visual Arts</h3>
41-
<ul>
42-
<li><a href="/2024/07/03/art.html">Art</a></li>
43-
<li><a href="/2024/07/04/anime.html">Anime</a></li>
44-
<li><a href="/2024/07/01/origami.html">Origami</a></li>
45-
</ul>
46-
47-
<h3>Literature & Film</h3>
48-
<ul>
49-
<li><a href="/2024/06/30/literature.html">Literature</a></li>
50-
<li><a href="/2024/01/05/cinema.html">Cinema</a></li>
51-
</ul>
31+
<div class="category-content">
32+
<h3>Music</h3>
33+
<ul>
34+
<li><a href="/2024/11/05/music-theory.html">Music Theory</a></li>
35+
<li><a href="/2024/07/12/ukulele.html">Ukulele</a></li>
36+
<li><a href="/2024/07/12/ukulele-2.html">Ukulele 2 - Roy Smeck Method</a></li>
37+
<li><a href="/2024/07/02/music.html">Musicians & Artists</a></li>
38+
<li><a href="/2024/11/04/zemfira.html">Zemfira</a></li>
39+
</ul>
40+
41+
<h3>Visual Arts</h3>
42+
<ul>
43+
<li><a href="/2024/07/03/art.html">Art</a></li>
44+
<li><a href="/2024/07/04/anime.html">Anime</a></li>
45+
<li><a href="/2024/07/01/origami.html">Origami</a></li>
46+
</ul>
47+
48+
<h3>Literature & Film</h3>
49+
<ul>
50+
<li><a href="/2024/06/30/literature.html">Literature</a></li>
51+
<li><a href="/2024/01/05/cinema.html">Cinema</a></li>
52+
</ul>
53+
</div>
5254
</section>
5355

5456
<section>
57+
<button class="category-toggle" aria-expanded="true">▼</button>
5558
<h2>Martial Arts & Wellness</h2>
56-
57-
<h3>Taijiquan</h3>
58-
<ul>
59-
<li><a href="/2025/01/06/taijiquan.html">Taijiquan</a></li>
60-
<li><a href="/2025/01/05/taijiquan-40-levels.html">Taijiquan 40 Levels</a></li>
61-
<li><a href="/2025/04/04/chen.html">Chen Style Taijiquan</a></li>
62-
<li><a href="/2024/01/09/taiji-double-weight.html">Taiji Double Weight</a></li>
63-
</ul>
64-
65-
<h3>Physical Activity & Health</h3>
66-
<ul>
67-
<li><a href="/2024/07/11/health.html">Health & Wellness</a></li>
68-
<li><a href="/2024/07/05/bike.html">Biking</a></li>
69-
</ul>
59+
<div class="category-content">
60+
<h3>Taijiquan</h3>
61+
<ul>
62+
<li><a href="/2025/01/06/taijiquan.html">Taijiquan</a></li>
63+
<li><a href="/2025/01/05/taijiquan-40-levels.html">Taijiquan 40 Levels</a></li>
64+
<li><a href="/2025/04/04/chen.html">Chen Style Taijiquan</a></li>
65+
<li><a href="/2024/01/09/taiji-double-weight.html">Taiji Double Weight</a></li>
66+
</ul>
67+
68+
<h3>Physical Activity & Health</h3>
69+
<ul>
70+
<li><a href="/2024/07/11/health.html">Health & Wellness</a></li>
71+
<li><a href="/2024/07/05/bike.html">Biking</a></li>
72+
</ul>
73+
</div>
7074
</section>
7175

7276
<section>
77+
<button class="category-toggle" aria-expanded="true">▼</button>
7378
<h2>Games & Entertainment</h2>
74-
75-
<h3>Video Games</h3>
76-
<ul>
77-
<li><a href="/2024/01/01/games.html">Games</a></li>
78-
<li><a href="/2025/12/26/nes.html">NES Emulators</a></li>
79-
</ul>
80-
81-
<h3>Card Games</h3>
82-
<ul>
83-
<li><a href="/2025/04/05/mtg-pauper.html">MTG Pauper</a></li>
84-
</ul>
79+
<div class="category-content">
80+
<h3>Video Games</h3>
81+
<ul>
82+
<li><a href="/2024/01/01/games.html">Games</a></li>
83+
<li><a href="/2025/12/26/nes.html">NES Emulators</a></li>
84+
</ul>
85+
86+
<h3>Card Games</h3>
87+
<ul>
88+
<li><a href="/2025/04/05/mtg-pauper.html">MTG Pauper</a></li>
89+
</ul>
90+
</div>
8591
</section>
8692

8793
<section>
94+
<button class="category-toggle" aria-expanded="true">▼</button>
8895
<h2>Academics & Intellectual Pursuits</h2>
89-
90-
<h3>Science & Mathematics</h3>
91-
<ul>
92-
<li><a href="/2024/01/02/science.html">Science</a></li>
93-
<li><a href="/2025/04/05/mltt-72.html">Martin-Löf Type Theory (1972)</a></li>
94-
<li><a href="/2025/08/28/math-countries.html">Mathematics by Country</a></li>
95-
</ul>
96-
97-
<h3>History & Philosophy</h3>
98-
<ul>
99-
<li><a href="/2024/01/04/philosophy.html">Philosophy</a></li>
100-
<li><a href="/2024/01/06/Karl-Marx.html">Karl Marx</a></li>
101-
<li><a href="/2024/01/07/Ivan-Pavlov.html">Ivan Pavlov</a></li>
102-
</ul>
96+
<div class="category-content">
97+
<h3>Science & Mathematics</h3>
98+
<ul>
99+
<li><a href="/2024/01/02/science.html">Science</a></li>
100+
<li><a href="/2025/04/05/mltt-72.html">Martin-Löf Type Theory (1972)</a></li>
101+
<li><a href="/2025/08/28/math-countries.html">Mathematics by Country</a></li>
102+
</ul>
103+
104+
<h3>History & Philosophy</h3>
105+
<ul>
106+
<li><a href="/2024/01/04/philosophy.html">Philosophy</a></li>
107+
<li><a href="/2024/01/06/Karl-Marx.html">Karl Marx</a></li>
108+
<li><a href="/2024/01/07/Ivan-Pavlov.html">Ivan Pavlov</a></li>
109+
</ul>
110+
</div>
103111
</section>
104112

105113
<section>
114+
<button class="category-toggle" aria-expanded="true">▼</button>
106115
<h2>Knowledge & Self-Development</h2>
107-
108-
<h3>Learning & Organization</h3>
109-
<ul>
110-
<li><a href="/2025/04/05/organizing-knowledge.html">Organizing Knowledge</a></li>
111-
<li><a href="/2024/01/08/epub-fb2.html">EPUB and FB2 Formats</a></li>
112-
</ul>
113-
114-
<h3>Professional Development</h3>
115-
<ul>
116-
<li><a href="https://github.com/streamcode9/software-design/blob/master/README.md">Principles</a></li>
117-
</ul>
116+
<div class="category-content">
117+
<h3>Learning & Organization</h3>
118+
<ul>
119+
<li><a href="/2025/04/05/organizing-knowledge.html">Organizing Knowledge</a></li>
120+
<li><a href="/2024/01/08/epub-fb2.html">EPUB and FB2 Formats</a></li>
121+
</ul>
122+
123+
<h3>Professional Development</h3>
124+
<ul>
125+
<li><a href="https://github.com/streamcode9/software-design/blob/master/README.md">Principles</a></li>
126+
</ul>
127+
</div>
118128
</section>
119129

120130
<section>
131+
<button class="category-toggle" aria-expanded="true">▼</button>
121132
<h2>Culture & Society</h2>
122-
123-
<h3>Food & Culinary</h3>
124-
<ul>
125-
<li><a href="/2025/08/25/sushi.html">Sushi</a></li>
126-
</ul>
127-
128-
<h3>Geography & Travel</h3>
129-
<ul>
130-
<li><a href="/2024/01/03/countries.html">Countries</a></li>
131-
</ul>
132-
133-
<h3>Home & Family</h3>
134-
<ul>
135-
<li><a href="/2025/01/28/hus.html">House & Home</a></li>
136-
<li><a href="https://github.com/streamcode9/os/blob/main/README.md">Schedule</a></li>
137-
</ul>
133+
<div class="category-content">
134+
<h3>Food & Culinary</h3>
135+
<ul>
136+
<li><a href="/2025/08/25/sushi.html">Sushi</a></li>
137+
</ul>
138+
139+
<h3>Geography & Travel</h3>
140+
<ul>
141+
<li><a href="/2024/01/03/countries.html">Countries</a></li>
142+
</ul>
143+
144+
<h3>Home & Family</h3>
145+
<ul>
146+
<li><a href="/2025/01/28/hus.html">House & Home</a></li>
147+
<li><a href="https://github.com/streamcode9/os/blob/main/README.md">Schedule</a></li>
148+
</ul>
149+
</div>
138150
</section>
139151

140152
<section>
153+
<button class="category-toggle" aria-expanded="true">▼</button>
141154
<h2>Governance & Politics</h2>
142-
143-
<h3>Politics & Society</h3>
144-
<ul>
145-
<li><a href="/2024/01/03/countries.html">Countries</a></li>
146-
</ul>
147-
148-
<h3>Urban Management</h3>
149-
<ul>
150-
<li>Elections: valgomat</li>
151-
</ul>
155+
<div class="category-content">
156+
<h3>Politics & Society</h3>
157+
<ul>
158+
<li><a href="/2024/01/03/countries.html">Countries</a></li>
159+
</ul>
160+
161+
<h3>Urban Management</h3>
162+
<ul>
163+
<li>Elections: valgomat</li>
164+
</ul>
165+
</div>
152166
</section>
153167

154168
<section>
169+
<button class="category-toggle" aria-expanded="true">▼</button>
155170
<h2>Ecology & Sustainability</h2>
156-
<ul>
157-
<li><a href="https://en.wikipedia.org/wiki/Sustainability">Sustainability</a></li>
158-
</ul>
171+
<div class="category-content">
172+
<ul>
173+
<li><a href="https://en.wikipedia.org/wiki/Sustainability">Sustainability</a></li>
174+
</ul>
175+
</div>
159176
</section>
160177

161178
<section>
179+
<button class="category-toggle" aria-expanded="true">▼</button>
162180
<h2>Future Topics</h2>
163-
164-
<h3>Available Categories</h3>
165-
<ul>
166-
<li>Financial Literacy</li>
167-
<li>Management and Leadership</li>
168-
<li>Information Security</li>
169-
<li>Media and Communications</li>
170-
<li>Cross-Cultural Communication</li>
171-
<li>Ethics and Morality</li>
172-
<li>Emotional Sphere and Psychology</li>
173-
<li>Interpersonal Relationships</li>
174-
</ul>
181+
<div class="category-content">
182+
<h3>Available Categories</h3>
183+
<ul>
184+
<li>Financial Literacy</li>
185+
<li>Management and Leadership</li>
186+
<li>Information Security</li>
187+
<li>Media and Communications</li>
188+
<li>Cross-Cultural Communication</li>
189+
<li>Ethics and Morality</li>
190+
<li>Emotional Sphere and Psychology</li>
191+
<li>Interpersonal Relationships</li>
192+
</ul>
193+
</div>
175194
</section>
176195

177196
<section>
197+
<button class="category-toggle" aria-expanded="true">▼</button>
178198
<h2>Misc</h2>
179-
<ul>
180-
<li><a href="/pages/blog.html">Latest posts</a></li>
181-
</ul>
199+
<div class="category-content">
200+
<ul>
201+
<li><a href="/pages/blog.html">Latest posts</a></li>
202+
</ul>
203+
</div>
182204
</section>
183205
</main>
184206
<footer class="site-footer">
185207
<small>&copy; 2025 Streamcode9</small>
186208
</footer>
209+
<script>
210+
document.querySelectorAll('.category-toggle').forEach(button => {
211+
button.addEventListener('click', function() {
212+
const content = this.nextElementSibling.nextElementSibling;
213+
const isExpanded = this.getAttribute('aria-expanded') === 'true';
214+
215+
this.setAttribute('aria-expanded', !isExpanded);
216+
content.classList.toggle('collapsed');
217+
});
218+
});
219+
</script>
187220
</body>
188221
</html>

0 commit comments

Comments
 (0)