چگونه ایجاد کنم: اثر فروپوشیدن

آموزش ایجاد بخش‌های قابل فروپوشیدن.

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

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

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

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

تنظیمات استایل دست‌بند:

/* تنظیمات استایل دکمه‌ای که برای باز و بسته کردن محتوای قابل فروپاشی استفاده می‌شود */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* هنگام کلیک بر روی دکمه و همچنین هنگام قرارگیری ماوس بر روی دکمه (مرور)، رنگ پس‌زمینه دکمه را اضافه کنید (از طریق JS نوع .active اضافه کنید) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* تنظیمات استایل محتوای قابل فروپاشی. توجه: به صورت پیش‌فرض مخفی است */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

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

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

اثر فروکش با انیمیشن (به سمت پایین)

برای ایجاد یک اثر فروکش با انیمیشن، max-height: 0وoverflow: hide و max-height 过渡 به کلاس پنل اضافه کنید.

سپس، از طریق استفاده از 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'; /* نشانه "مثبت" (+) در کد یونیکد */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* نشانه "منفی" (ـ) در کد یونیکد */
}

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