يمكن استخدام التوابع واستدعاؤها في أماكن مختلفة

إخفاء نص عند الضغط على زر :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> show and hide </title>
</head>

<body>

	<button onclick="hidetext();"> hide </button>

		<p id="sh"> this text is visible right now </p>

<script>

	function hidetext() {
	document.getElementById("sh").style.display="none";
	}

</script>
</body>

</html>

إظهار نص عند الضغط على زر :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> show and hide </title>
</head>
<style>
#sh {
Display:none;
}
</style>
<body>

	<button onclick="showtext();"> hide </button>

		<p id="sh"> this text is visible right now </p>

<script>

	function showtext() {
	document.getElementById("sh").style.display="block";
	}

</script>
</body>

</html>

لنقم بإظهار النص بزر وإخفاءه بزر آخر

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> show and hide </title>
</head>
<style>
	#sh {
	display:none;
	}
</style>

<body>

	<button onclick="showtext();"> show </button>

	<section id="sh">
		<p> this text is visible right now </p>
		<button onclick="hidetext();"> hide </button>
	</section>
<script>

	function hidetext() {
	document.getElementById("sh").style.display="none";
	}

	function showtext() {
	document.getElementById("sh").style.display="block";
	}

</script>
</body>

</html>

تم إضافة الوسمsection

لأنه أصبح لدينا عنصرين يجب أن نقوم بإظهارهم وإخفاءهم , أحد الحلول هو تضمينهما بوسم آخر وهو إما section او div .. إلخ

جرب إضافة صورة إلى الـ section السابق