কিভাবে ফোল্ডার ইফেক্ট তৈরি করা হয়: ফোল্ডার ইফেক্ট

কিভাবে ফোল্ডাবল অংশ তৈরি করতে শিখুন。

সরলোচিত প্রভাব

এই বাটনটি ক্লিক করলে, সরলোচিত কনটেন্টটি দেখা এবং লুকানোর মধ্যে পাল্টা করতে পারেন。

Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

亲自试一试

সরলোচিতময় প্রভাব তৈরী করুন

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন：

<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন：

হান্ডসার্ন শৈলী সেট করুন：

/* ডিক্রোলেবল কনটেন্টটি খোলা এবং বন্ধ করার জন্য ব্যবহৃত বাটনের শৈলী সেট করুন */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* বাটনটি ক্লিক করা হলে, এবং আপনি বাটনের ওপর মাউস নিয়ে আসার সময় (হভাইট), বাটনের পিছনচ্যুতির রঙ যোগ করুন (জেভাস্ক্রিপ্ট দ্বারা .active শ্রেণী যোগ করুন) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* সরলোচিতময় বিষয়ের শৈলী সেট করুন। নোট: ডিফল্টে লুকানো রয়েছে */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #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;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "none";
    }
  });
}

亲自试一试

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'; /* 表示“加号”（+）的 Unicode 字符 */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* 表示“减号”（-）的 Unicode 字符 */
}

亲自试一试