כפתור קרא עוד עם אלמנטור

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

קודם כל נכניס את הטקסט הקצר (שתמיד מופיע), ואז נכניס עוד ווידג’ט של עורך טקסט שם נכניס את הטקסט הנוסף, וניתן לווידג’ט את הקלאס more-text

עכשיו נוסיף כפתור (מקובל להוסיף מתחת לטקסט המוסתר, אבל אפשר גם מעל), בכפתור נכתוב קרא עוד (ולהשאיר את הקישור ריק), וניתן לכפתור את הקלאס more-btn

נגרור לעמוד עוד ווידג’ט מסוג HTML ושם נכניס את הקוד הבא.

				
					<style>
    .more-text{
        display: none;
    }
    .more-text p:last-of-type{
        margin-bottom: 0 !important
    }	
    .more-btn{
        cursor: pointer;
    }
</style>
<script>
    jQuery(document).ready(function($){
$(".more-btn").click(function(){
  $(".more-text").slideToggle();
   $(".more-btn .elementor-button-text").text(function(i, text) {
      return text === "קרא עוד" ? "קרא פחות"  : "קרא עוד";
    });
});
});
</script>
				
			
וככה זה נראה

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

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

8 תגובות

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

          1. טוב הצלחתי בדרך אחרת פשוט יצרתי את זה בhtml למי שזה קורה מוזמן לקחת מכאן את הקוד :

            קרא עוד

            .more-text {
            display: none;
            }

            .more-text p:last-of-type {
            margin-bottom: 0 !important;
            }
            .more-btn {
            cursor: pointer;
            font-family: halmoni;
            font-size: 20px;
            color: #32245F;
            border: 1px solid #32245F;
            border-radius: 100px!important;
            padding: 5px 20px;
            transition: background-image 0.3s ease;
            }
            .more-btn {
            cursor: pointer;
            }

            .more-btn {
            cursor: pointer;
            }
            .more-btn:hover {
            background-image: linear-gradient(163deg, #714D1F 0%, #86622A 3.60%, #AA863E 8.80%, #C19D4B 13.00%, #CAA650 15.60%, #BD9A49 25.50%, #A7843E 38.70%, #AE8B41 41.40%, #C39F4C 45.50%, #AD8E47 54.80%, #C7A34F 57.30%, #FFEC8D 70.40%, #F8E68E 78.20%, #F1DF91 83.30%, #F1DF91 100%);
            color: #32245F;
            }
            .more-btn:focus {
            background-image: linear-gradient(163deg, #714D1F 0%, #86622A 3.60%, #AA863E 8.80%, #C19D4B 13.00%, #CAA650 15.60%, #BD9A49 25.50%, #A7843E 38.70%, #AE8B41 41.40%, #C39F4C 45.50%, #AD8E47 54.80%, #C7A34F 57.30%, #FFEC8D 70.40%, #F8E68E 78.20%, #F1DF91 83.30%, #F1DF91 100%);
            color: #32245F;
            }

            jQuery(document).ready(function($) {
            $(“.more-btn”).click(function() {
            $(“.more-text”).slideToggle();
            $(this).text(function(i, text) {
            return text === “קרא עוד” ? “קרא פחות” : “קרא עוד”;
            });
            });
            });

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

פעם בשבוע אני שולח ניוזלטר
עם כל המאמרים החדשים באתר
מעניין אותך?