מדריך למעבר מפוטר רחב לאקורדיון במובייל (ללא שכפול אלמנטים)

במדריך הזה נראה איך אפשר להפוך פוטר רחב בדסקטופ לפוטר מצומצם ואלגנטי במובייל בלי להשתמש בשכפול אלמנטים או אזורים (מה שיפגע לנו בגודל מהירות האתר ועוד…).

אז לצורך העניין זה הפוטר שלנו בדסקטופ:

וזאת התוצאה שאנחנו רוצים להגיע אליה במובייל:

ניגש למתכון 😎

נוסיף בפוטר אלמנט HTML

ונדביק שם את הקוד הבא:

קוד JS להדבקה בוידג׳ט HTML

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
</script>Code language: HTML, XML (xml)

על אותו אלמנט נעבור לטאב מתקדם > CSS מותאם ונוסיף את הקוד הבא:

קוד CSS

@media (max-width: 767px) {
    .content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }
    .collapsible {
        border-bottom: 1px solid #e9e0d2;
        padding-bottom: 20px;
    }
    .collapsible:after {
        content: '\02795'; /* Unicode character for "plus" sign (+) */
        font-size: 13px;
        position: absolute;
        right: 0;
        top: 0;
    }
    .active:after {
        content: "\2796"; /* Unicode character for "minus" sign (-) */
    }
}Code language: CSS (css)

הוספת הקלאסים המתאימים

עכשיו נשאר לנו להוסיף Class מתאים לכותרות ולוידג׳טים שמתחת לכותרות.
אז לכותרות נוסיף את הקלאס:

collapsible

ולוידג׳טים מתחת לכותרות נוסיף:

content 

ככה זה נראה:

וזהו! התוצאה שלנו

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

הערה קטנה 2-
אם אתם כבר בעריכת פוטר אפשר להוסיף כפתור וואטסאפ צף עם אנימציה נחמדה, במקרה גם על זה אפשר לקרוא באתר 😛 אנימציית כפתור Whatsapp עם וידג׳ט אייקון (ואפילו יש במדריך תבנית מוכנה לכפתור, הכי פשוט שיש! 🙂 )

בהצלחה!