איך מוסיפים אפשרות של Read More לעמוד באתר?

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

פתרון נחמד הוא כפתור Read More, שמאפשר להכניס רק חלק מהטקסט לעמוד, ומי שמעוניין לקרוא עוד יכול ללחוץ עליו.

הפתרון לא מסובך, אבל דורש שימוש בקוד ופעולה לפי שלבים:

1. נתחיל מהפעלת ה Dev Mode של האדיטור - מה שמאפשר שימוש בקוד (מסומן במלבן אדום):

2. נוסיף לאתר Multi-State Box - תיבה אשר מכילה מספר מצבים עם תוכן שונה, ומציגה מצב אחד בכל פעם.

אפשר להוסיף תיבה עם תוכן מעוצב, או תיבה ריקה (כמו שאשתמש פה)

3. נחליף את השם של ה Multi-state box ושל ה State: מצד ימין למטה יש ריבוע עם חץ קטן, כשנלחץ עליו יפתח לנו Properties & Events Panel.

ל ID נחליף את השם ל readMoreStatebox

ל State ID נקרא collapsedState

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

5. נוסיף כפתור Read More - בחרו כפתור ללא מסגרת או רקע. ב Properties & Events panel נשנה לכפתור את ה ID ל readMoreButton.

6. נשכפל את ה State:

כשעומדים על התיבה, לוחצים על Manage States. בוחרים ב Duplicate State

7. נחליף את שם ה state ל expandedState

8. נוסיף את המשך הטקסט

9. נחליף את הטקסט של הכפתור מ Read More ל Read Less ונחליף את ה ID שלו ל readLessButton

10. עכשיו נוסיף קוד:

נפתח את Code Panel ע"י לחיצה על Page Name בתחתית העמוד:

נעתיק את הקוד הזה ונדביק אותו מתחת לכיתוב $w.onReady(function () {

$w("#readMoreButton").onClick(() => { $w("#readMoreStatebox").changeState("expandedState"); }); $w("#readLessButton").onClick(() => { $w("#readMoreStatebox").changeState("collapsedState"); }); });

וזהו! הצלחתם? אם כן, כל הכבוד! אם לא, מוזמנים לפנות אליי ואעזור לכם.