کی طرح میں بنایا جاسکتا ہے: فولڈ اثر

سیکھنے کا طریقہ جو ایک فولڈبل پارٹ کریوئس کرسکے

ایجاد اثر بخشی قابل فروزشدن

مرحله اول - اضافه کردن HTML:

<button type="button" class="collapsible">باز کردن قابل فروزشدن</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

مرحله دوم - اضافه کردن CSS:

تنظیم استایل فلاپ:

/* تنظیم استایل دکمه‌ای که برای باز و بسته کردن محتوای قابل فروزشدن استفاده می‌شود */
.کلاپسایب {
  رنگ پس‌زمینه: #eee;
  رنگ: #444;
  مکان‌نما: اشاره‌گر;
  ترازبندی: 18 پیکسل;
  عرض: 100%;
  کشیدن: نه;
  جابجایی متن: چپ;
  کشیدن کناری: نه;
  اندازه فونت: 15 پیکسل;
}
/* هنگام کلیک بر روی دکمه و هنگام قرارگیری ماوس بر روی دکمه (لغزش)، رنگ پس‌زمینه دکمه را اضافه کنید (از طریق جاوااسکریپت کلاس .active اضافه کنید) */
.فعال, .کلاپسایب:hover {
  رنگ پس‌زمینه: #ccc;
}
/* تنظیم استایل محتوای قابل فروزشدن. توجه: به صورت پیش‌فرض مخفی است */
.content {
  padding: 0 18px;
  نمایش: نه;
  overflow: hidden;
  رنگ پس‌زمینه: #f1f1f1;
}

مرحله سوم - اضافه کردن جاوااسکریپت:

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;
    اگر (محتوای استایل نمایش برابر با "بلاک" است) {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

به طور مستقیم امتحان کنید

تأثير انحناء مذهب (السحب إلى الأسفل) مع تأثير حركي

لإنشاء تأثير انحناء مذهب (السحب إلى الأسفل) مع تأثير حركي، قم بتعيين max-height: 0وoverflow: hide وأيضًا max-height الخصائص مع إضافة انتقال إلى فئة اللوحة.

ثم، باستخدام جافا سكربت، قم بإضافة إلى فئة اللوحة عن طريق تعيين 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>

به طور مستقیم امتحان کنید

إضافة أيقونة

أضف رمزًا إلى كل زر لتحديد ما إذا كان المحتوى المنقolfل مفتوحًا أو مغللقًا:

مثال

.collapsible:after {
  content: '\02795'; /* بيان عن رمز '+' (الإضافي) عبر رمز الماكنة */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* بيان عن رمز "-" (الناقص) عبر رمز الماكنة */
}

به طور مستقیم امتحان کنید