বুটস্ট্রাপ ৫ এর একোর্ডিয়ন (Accordion) একটি অত্যন্ত জনপ্রিয় উপাদান যা ব্যবহারকারীদের একাধিক কন্টেন্ট প্যানেল সঞ্চালন করতে সহায়তা করে। একোর্ডিয়ন প্যানেলগুলিকে সাধারণত "খোলা" এবং "বন্ধ" করা যায়। যদি আপনি চান যে এক সময়ে শুধুমাত্র একটি প্যানেল খোলা থাকে, তাহলে Multiple Panels Management করতে হবে। বুটস্ট্রাপ ৫ এ একোর্ডিয়ন প্যানেলগুলোর মধ্যে একটিকে একাধিক প্যানেল রোল-আপ বা রোল-ডাউন করার মাধ্যমে ব্যবস্থাপনা করা যায়।
বুটস্ট্রাপ ৫ এর একোর্ডিয়ন উপাদানটি এমনভাবে তৈরি করা হয়েছে যে, একে ব্যবহার করলে স্বয়ংক্রিয়ভাবে একাধিক প্যানেল পরিচালনা করা সহজ হয়ে যায়।
একোর্ডিয়ন মাল্টিপল প্যানেল ব্যবস্থাপনা উদাহরণ
বুটস্ট্রাপ ৫ এর accordion কম্পোনেন্ট ব্যবহার করে আপনি সহজেই একাধিক প্যানেল নিয়ে কাজ করতে পারবেন, যেখানে এক সময়ে শুধুমাত্র একটি প্যানেল খোলা থাকবে। নিচে একটি উদাহরণ দেওয়া হল:
উদাহরণ: একোর্ডিয়ন মাল্টিপল প্যানেল ব্যবস্থাপনা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion with Multiple Panels</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="accordion" id="accordionExample">
<!-- প্রথম প্যানেল -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
প্যানেল ১
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
এটি প্যানেল ১ এর কন্টেন্ট। এখানে আপনি যেকোনো তথ্য বা উপাদান রাখতে পারেন।
</div>
</div>
</div>
<!-- দ্বিতীয় প্যানেল -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
প্যানেল ২
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
এটি প্যানেল ২ এর কন্টেন্ট। এই প্যানেলটি শুধুমাত্র তখনই প্রদর্শিত হবে যখন এটি খোলা হবে।
</div>
</div>
</div>
<!-- তৃতীয় প্যানেল -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
প্যানেল ৩
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
এটি প্যানেল ৩ এর কন্টেন্ট। একে খোলার জন্য শুধু প্যানেলটিতে ক্লিক করুন।
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
ব্যাখ্যা:
data-bs-parent="#accordionExample": এই অ্যাট্রিবিউটটি নিশ্চিত করে যে একোর্ডিয়নটির একটি প্যানেল খোলার সাথে অন্য প্যানেলটি বন্ধ হয়ে যাবে। এটি Accordion কম্পোনেন্টের মাল্টিপল প্যানেল ব্যবস্থাপনা করার জন্য গুরুত্বপূর্ণ। এখানে#accordionExampleহচ্ছে একোর্ডিয়নের মূল কন্টেইনারের আইডি।collapseএবংshow: প্রথম প্যানেলেcollapse showক্লাসটি দেওয়া হয়েছে, যার মানে এই প্যানেলটি ডিফল্টভাবে খোলা থাকবে। অন্যান্য প্যানেলে শুধুcollapseক্লাসটি রয়েছে, যা তাদের বন্ধ অবস্থায় রাখে।accordion-button: প্রতিটি প্যানেলের হেডারে এই বাটন থাকে, যা ক্লিক করলে প্যানেলটি খোলে বা বন্ধ হয়।
টিপস:
collapsedক্লাস: এই ক্লাসটি প্যানেল বন্ধ অবস্থায় রাখে। আপনি যখন প্যানেলটিকে খোলার জন্য চাইবেন, তখন এই ক্লাসটি স্বয়ংক্রিয়ভাবে সরিয়ে দেওয়া হবে।aria-expanded="true/false": এই অ্যাট্রিবিউটটি প্যানেল খোলা বা বন্ধ থাকার অবস্থান নির্দেশ করে। প্যানেলটি খোলা থাকলে এটিtrueএবং বন্ধ থাকলেfalseথাকবে।
মাল্টিপল প্যানেলস ব্যবস্থাপনা (অতিরিক্ত কাস্টমাইজেশন):
- যদি আপনি চান যে একে অপরের সাথে একাধিক প্যানেল খোলা থাকুক, তাহলে
data-bs-parentঅ্যাট্রিবিউটটি সরিয়ে ফেলুন। - অটো এক্সপ্যান্ড ফিচার যোগ করতে চাইলে JavaScript ব্যবহার করে স্বয়ংক্রিয়ভাবে কোনো নির্দিষ্ট প্যানেল খুলতে পারেন।
এটি আপনাকে সহজেই একাধিক একোর্ডিয়ন প্যানেল ব্যবস্থাপনা করতে সাহায্য করবে, যেখানে একসময় শুধুমাত্র একটি প্যানেল খোলা থাকবে।
Content added By
Read more
