چگونه می توانیم با استفاده از CSS المانی را پنهان کنیم و یا نمایش دهیم؟
- فرشته حقیقی 4 سال قبل سوال کرد
- آخرین ویرایش 4 سال قبل
- شما باید برای ارسال دیدگاه وارد شوید
برای مخفی کردن المان از display: none
و نمایش المان از display
: block
می توانیم استفاده کنیم. در مثال زیر عبارت “برای ثبت نام شرایط زیر لازم می باشد” مخفی می باشد و سپس با کلیک بر روی “نمایش جزییات” نمایش داده می شود.
<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
font-size: 16px;
padding: 10px;
text-align: center;
background-color: #4CAF50;
color: white;
border: solid 1px #a6d8a8;
margin: auto;
}
#panel {
display: none;
}
</style>
</head>
<body>
<p class="flip" onclick="myFunction()">نمایش جزییات</p>
<div id="panel">
<p>برای ثبت نام شرایط زیر لازم می باشد</p>
</div>
<script>
function myFunction() {
document.getElementById("panel").style.display = "block";
}
</script>
</body>
</html>
همچنین برای مخفی کردن از visibility:hidden
نیز می توانیم استفاده کنیم.
- فرشته حقیقی 4 سال قبل پاسخ داد
- آخرین ویرایش 4 سال قبل
- شما باید برای ارسال دیدگاه وارد شوید