বড় কোনো কন্টেন্টকে লুকিয়ে রেখে টোগল করে দেখোনোর জন্য বুটস্ট্রাপ "কলাপ্স" ব্যবহার করা হয়। নিচের উদাহরণে একটি বেসিক কলাপ্সিবল তৈরি করা দেখানো হলোঃ
kt_satt_skill_example_id=1105
.collapse
ক্লাসের মাধ্যমে একটি কলাপ্সিবল এলিমেন্টকে বুঝানো হয়েছে। বাটনে ক্লিক করার সাথে সাথে কন্টেন্ট টি দেখা যায় আর ক্লিক করলে তা চলে যায়।
কলাপ্সিবল কন্টেন্টকে নিয়ন্ত্রন(দেখানো/লুকানো) করার জন্য, < a >
অথবা < button >
এলিমেন্টের মধ্যে data-toggle="collapse"
এট্রিবিউট যুক্ত করুন।
তারপর বাটন বা লিংকের সাথে কলাপ্সিবল কন্টেন্টকে (< div id="collapse" >
) সংযুক্ত করার জন্য করার জন্য data-target="#idName"
এট্রিবিউট যুক্ত করুন।
নোটঃ < a >
এলিমেন্টে data-target
এট্রিবিউটের পরিবর্তে href
এট্রিবিউট ব্যবহার করা যায়ঃ
kt_satt_skill_example_id=1106
ডিফল্টভাবে, কলাপ্সিবল কন্টেন্ট লুকানো অবস্থায় থাকে। ডিফল্টভাবে কন্টেন্টকে প্রদর্শিত অবস্থায় রাখার জন্য .in
ক্লাস যুক্ত করতে হবেঃ
kt_satt_skill_example_id=1107
নিচের উদাহরণে কিভাবে কলাপ্সিবল প্যানেল তৈরি করা যায় তা দেখানো হলোঃ
kt_satt_skill_example_id=1108
নিচের উদাহরণে লিস্ট গ্রুপ সহ একটি কলাপ্সিবল প্যানেল তৈরি করা দেখানো হলোঃ
kt_satt_skill_example_id=1109
নোটঃ কলাপ্সিবল আইটেমটি প্রদর্শিত হওয়ার সাথে সাথে পেরেন্ট এলিমেন্টের অন্য সব কলাপ্সিবল এলিমেন্ট ক্লোজ করে দেওয়ার জন্য data-parent
এট্রিবিউট ব্যবহার করতে হবে।
kt_satt_skill_example_id=1110
বুটস্ট্রাপ কলাপ্স অপশন, মেথড এবং ইভেন্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের বুটস্ট্রাপ JS কলাপ্স রেফারেন্স পেজে ভিজিট করুন।
আরও দেখুন...