הנה טריק HTML נחמד שמסתבר שנתמך כבר תקופה ואיכשהו דילגתי עליו - לא צריך יותר JavaScript (או אפילו אם כבר יש לכם JavaScript לא צריך לשמור משתנה סטייט) רק בשביל לנהל אקורדיון עם דברים שנפתחים ונסגרים. כל מה שצריך זה אלמנט details של HTML וזה נראה ככה:

<details >
<summary>Toggle me</summary>
  <div > 
    <p>Look there's no JavaScript involved ... yay</p> 
  </div> 
</details>

והקודפן:

ואם אתם צריכים לעצב אותו אפשר להשתמש ב :open ב CSS כדי לתפוס את המצב הפתוח (לא עובד בספארי בינתיים) לדוגמה:

details:open > summary {
  background-color: pink;
}

:is(select, input):open {
  background-color: pink;
}

או ב open בתוך סוגריים מרובעים שכן עובד גם בספארי:

details summary {
  background: pink;
}

details {
  background: lightgreen;
}

details[open] summary {
  background: red;
}

ובנושא אחר - אני פותח היום את הרישום לקבוצת פיתוח הפרויקטים הבאה שתצא לדרך ביוני. זה מסלול מעולה שנותן למשתתפים את המסגרת, הידע והמוטיבציה לבנות פרויקט מקצה לקצה. אם מעניין אתכם שווה להעיף מבט בדף הפרויקט ולקבוע שם פגישת היכרות.