বুটস্ট্রাপ বেসিক কলাপ্সিবল

বড় কোনো কন্টেন্টকে লুকিয়ে রেখে টোগল করে দেখোনোর জন্য বুটস্ট্রাপ "কলাপ্স" ব্যবহার করা হয়। নিচের উদাহরণে একটি বেসিক কলাপ্সিবল তৈরি করা দেখানো হলোঃ

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 কলাপ্স রেফারেন্স পেজে ভিজিট করুন।