Pablo Guides - Onclick Event כדי להציג תוכן מוסתר

onclick event כדי להציג תוכן מוסתר

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

כך זה נראה :

זה הקוד להוספת הכפתור כמו בדוגמה מעל

<button onclick="extratextFunction()">לחצו כאן להצגת התוכן</button>

<p id="extratext"></p>

<script>
function extratextFunction() {
  document.getElementById("extratext").innerHTML = "כאן את שמה את כל הטקסט הנוסף שאתה רצה שיתחיל מוסתר בהתחלה ויוצג רק בעת לחיצת כפתור מעל";
}
</script>

DIV וזו דומה נוספת אבל הפעם עם

כאן יש טקסט מאוד מאוד ארוך לכ הוא מתחיל מוסתר על הוספת כלל CSSS – (display: none).

הוא מוגדר כבלוק כדי לשפר את התצוגה שלו (display: block).

ה class="hiddenlongtext" מחובר לפונקצית onclick . כאשר משתמש לוחץ על האלמנט, הפונקציה בשם hideverylongtextFunction() תופעל, שכולה משנה את העיצוב של ה div עם המזהה id="hiddenlongtext" ממה שהגדרנו לו ב CSS – display:none (מתחיל כמוסתר) ל display:block (מוצג כבלוק).

שתפו אם אהבתם ועזר גם לכם

לתוכן שלכם DIV וזה הקוד להוספת הדוגמה עם ה


<style>
#hiddenlongtext, .flip {
  font-size: 16px;
  padding: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  border: solid 1px #a6d8a8;
  margin: auto;
}

#hiddenlongtext {
  display: none;
}
</style>

<body>

<button class="hiddenlongtext" onclick="hideverylongtextFunction()">לחצו לתצוגה</button>

<div id="hiddenlongtext">
  <p>כאן יש טקסט מאוד מאוד ארוך לכ הוא מתחיל מוסתר  על הוספת כלל CSSS - (display: none).</p>
  <p>הוא מוגדר כבלוק כדי לשפר את התצוגה שלו (display: block).</p>
  <p>ה class="hiddenlongtext" מחובר לפונקצית onclick . 
  כאשר משתמש לוחץ על האלמנט, הפונקציה בשם hideverylongtextFunction() תופעל,
  שכולה משנה את העיצוב של ה div עם המזהה id="hiddenlongtext" ממה שהגדרנו לו ב CSS - display:none (מתחיל כמוסתר) 
ל  display:block (מוצג כבלוק).</p>
  <p>שתפו אם אהבתם ועזר גם לכם</p>
</div>

<script>
function hideverylongtextFunction() {
  document.getElementById("hiddenlongtext").style.display = "block";
}
</script>