كيف - طي
تعرف على كيفية إنشاء قسم قابل للطي.
انهيار
انقر فوق الزر للتبديل بين إظهار وإخفاء المحتوى القابل للطي.
بعض المحتوى القابل للطي. انقر فوق الزر للتبديل بين إظهار وإخفاء المحتوى القابل للطي. الألم في حد ذاته مهم ، لكن الألم يزداد عن طريق عملية شد الدهون ، لكنني أعطيها الوقت لخفضها حتى أقوم ببعض الأعمال الرائعة والألم. لغرض الوصول إلى الحد الأدنى ، يجب على من منا ممارسة أي وظيفة باستثناء الاستفادة من العواقب المترتبة على ذلك.
إنشاء ملف قابل للطي
الخطوة 1) أضف HTML:
مثال
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
الخطوة 2) أضف CSS:
نمط الأكورديون:
مثال
/* Style the button that is used to open and close the
collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the
.active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the
collapsible content. Note:
hidden by default */
.content {
padding: 0 18px;
display:
none;
overflow: hidden;
background-color: #f1f1f1;
}
الخطوة 3) أضف JavaScript:
مثال
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click",
function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display
=== "block") {
content.style.display =
"none";
} else {
content.style.display = "block";
}
});
}
متحرك قابل للطي (منزلق لأسفل)
لجعل الرسوم المتحركة قابلة للطي ، قم بإضافة max-height: 0
و overflow: hidden
a transition
لخاصية max-height إلى panel
الفصل الدراسي.
بعد ذلك ، استخدم JavaScript لتحريك المحتوى لأسفل عن طريق تعيين قيمة محسوبة
max-height
، اعتمادًا على ارتفاع اللوحة على أحجام الشاشات المختلفة:
مثال
<style>
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<script>
var
coll =
document.getElementsByClassName("collapsible");
var i;
for (i = 0; i <
coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight =
content.scrollHeight + "px";
}
});
}
</script>
أضف الأيقونات
أضف رمزًا إلى كل زر للإشارة إلى ما إذا كان المحتوى القابل للطي مفتوحًا أم مغلقًا:
مثال
.collapsible:after {
content: '\02795'; /* Unicode
character for "plus" sign (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /*
Unicode character for "minus" sign (-) */
}