7 צעדים לבניית אקורדיון נגיש ומהיר ללא JavaScript ב-2026

בעבר, כל רכיב מתקפל פשוט דרש מאיתנו להעמיס ספריות כבדות או לכתוב סקריפטים לניהול אירועי לחיצה. בסטודיו שלי בתל אביב ראיתי אתרים שאיבדו נקודות יקרות בביצועי Lighthouse רק בגלל עשרות שורות JS שניהלו פתיחה וסגירה של שאלות נפוצות.

כיום הדפדפנים תומכים במאפיין name בתוך תגית <details> ובסגנונות CSS מתקדמים שמבטלים את הצורך בסקריפטים חיצוניים.

1. השתמשו בתגיות המקוריות details ו-summary

היסוד של כל אקורדיון טבעי מתחיל בשתי תגיות HTML פשוטות: <details> והילד הישיר שלו <summary>. התגית הראשונה מייצרת את מעטפת הרכיב, והשנייה משמשת ככותרת הלחיצה.

אין צורך ב-Event Listeners.

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

2. צרו קבוצה בלעדית בעזרת מאפיין name

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

הגדרה · Exclusive Accordion

אקורדיון בלעדי הוא דפוס ממשק שבו פתיחת אלמנט אחד סוגרת באופן אוטומטי את שאר האלמנטים בקבוצה.

אם מעניקים את אותו השם לכמה תגיות <details> (למשל name="faq-group"), הדפדפן הופך אותן לקבוצה בלעדית. פשטות טהורה.

3. בטלו את חץ ברירת המחדל של הדפדפן

חץ ברירת המחדל של הדפדפן מראה מראה ישן ולא תמיד מתאים לעיצוב האתר. כדי להיפטר ממנו, משתמשים ב-CSS פשוט.

הגדרת list-style: none על אלמנט ה-<summary> מעלימה את המעוין השחור. בדפדפנים מסוימים תצטרכו גם את הפסאודו-אלמנט ::-webkit-details-marker עם הגדרת display: none.

הקוד משתחרר. עכשיו יש לכם קנבס חלק לחלוטין לעיצוב חופשי.

4. הוסיפו אייקון מותאם אישית שמתחלף או מסתובב

אחרי שהעלמנו את החץ המקורי, מוסיפים סמל ייחודי. אני אוהב להשתמש ב-SVG קטן או בסימן פלוס שמשתנה לאיקס.

ברגע שרכיב ה-<details> מקבל את המצב הפתוח (details[open]), מפעילים טרנספורמציה על האייקון שבתוכו.

זה מעניק תחושה מודרנית. המשתמש מקבל פידבק ויזואלי מיידי.

5. פתחו הנפשת גובה חלקה בעזרת CSS Grid

הבעיה ההיסטורית של HTML הייתה חוסר היכולת להנפיש גובה מ-0 ל-auto. ב-2026, פותרים את זה בקלות בעזרת CSS Grid.

מגדירים את מעטפת התוכן הפנימי עם display: grid ו-grid-template-rows: 0fr. כשהאקורדיון נפתח, משנים את הערך ל-1fr תוך שימוש ב-transition על גבי ה-grid-template-rows.

התנועה זורמת. הכל קורה במישור ה-GPU ללא גמגומים.

6. שמרו על מנגנון הנגישות המובנה

רכיבי JavaScript מותאמים אישית נוטים לשבור נגישות. מפתחים שוכחים לרוב להוסיף מקשי מקלדת או מאפייני ARIA נדרשים.

ברכיב HTML נייטיב, הנגישות מגיעה מהמפעל. קוראי מסך מבינים מיד שמדובר ברכיב מתקפל. המשתמש עובר עם מקש Tab ופותח בעזרת Space או Enter.

7. שפרו את קריאות התוכן עבור מנועי סריקה ו-AI

מנועי חיפוש וסורקי תשובות מעדיפים מבנה סמנטי וברור.

כשאנו משתמשים ב-<details> וב-<summary>, ה-DOM נשאר קריא וקל לניתוח. מנועי AI כדוגמת ChatGPT או Perplexity מסוגלים לשלף תשובות מתוך אקורדיון שאלות נפוצות מובנה בהרבה יותר קלות מאשר מתוך רשת דיבים עמוסה בסקריפטים.

קוד נקי מביא תוצאות.

לסיכום

אין יותר שום סיבה להעמיס קוד JavaScript מיותר בשביל אקורדיון נפוץ. HTML ו-CSS מציעים כיום פתרון מלא, מהיר ונגיש.

💡

איכות הקוד נמדדת במה שאתה מצליח להוריד ממנו, לא במה שאתה מוסיף אליו.