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

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

קודם כל נכניס את הטקסט הקצר (שתמיד מופיע), ואז נכניס עוד ווידג’ט של עורך טקסט שם נכניס את הטקסט הנוסף, וניתן לווידג’ט את הקלאס 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>
				
			
וככה זה נראה

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

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

כתיבת תגובה

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

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