Accordion বা Collapsible Elements হলো এমন ধরনের UI উপাদান যা একাধিক সেকশনকে একসাথে গ্রুপ করে এবং এক সময়ে একটিই সেকশন প্রদর্শন করতে দেয়। এগুলি সাধারণত লম্বা কন্টেন্টকে ছোট সেকশনে ভাগ করে দেখানোর জন্য ব্যবহৃত হয়, যেখানে ব্যবহারকারী একটি সেকশন খুললে অন্য সেকশনগুলো বন্ধ হয়ে যায়। Materialize CSS এ Accordion বা Collapsible Elements তৈরি করা খুবই সহজ এবং ইনটারেকটিভ।
এখানে Accordion বা Collapsible Elements তৈরি করার ধাপগুলো এবং কনফিগারেশন বিস্তারিতভাবে আলোচনা করা হলো।
Accordion বা Collapsible Elements তৈরি করা
Accordion বা Collapsible Elements তৈরি করতে Materialize CSS এ Collapsible ক্লাস ব্যবহার করা হয়, যা ব্যবহারকারীর ইন্টারঅ্যাকশন (যেমন ক্লিক) এর মাধ্যমে সেকশন খোলার এবং বন্ধ করার সুবিধা দেয়।
১. Basic Accordion তৈরি করা:
Materialize CSS এ Accordion তৈরির জন্য collapsible ক্লাস এবং collapsible-item ব্যবহার করা হয়। উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Accordion Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><span>Content 1</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><span>Content 2</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><span>Content 3</span></div>
</li>
</ul>
<script>
$(document).ready(function(){
$('.collapsible').collapsible();
});
</script>
</body>
</html>
এখানে:
- collapsible: এই ক্লাসটি পুরো অ্যাকর্ডিয়ন বা কোলাপসিবল লিস্ট তৈরি করে।
- collapsible-header: এই ক্লাসটি প্রতিটি সেকশনের শিরোনাম (header) জন্য ব্যবহৃত হয়।
- collapsible-body: এই ক্লাসটি সেকশনের কনটেন্ট (body) ধারণ করে।
- material-icons: আইকন ব্যবহার করার জন্য ক্লাস।
- collapsible(): জাভাস্ক্রিপ্ট ফাংশন যা অ্যাকর্ডিয়ন বা কোলাপসিবল সিস্টেমের কার্যকারিতা সক্রিয় করে।
২. Accordion কাস্টমাইজেশন (একাধিক সেকশন একসাথে খোলার জন্য):
ডিফল্টভাবে, Materialize CSS এ এক সময়ে শুধুমাত্র একটি সেকশন খোলা থাকে। তবে আপনি চাইলে একাধিক সেকশন একসাথে খোলার জন্য কনফিগারেশন পরিবর্তন করতে পারেন। এর জন্য accordion: false অপশন ব্যবহার করা হয়।
<script>
$(document).ready(function(){
$('.collapsible').collapsible({
accordion: false // একাধিক সেকশন একসাথে খোলার জন্য
});
});
</script>
৩. Collapsible Items with Header and Body
যখন Accordion তৈরি করা হয়, তখন প্রতিটি আইটেমের জন্য একটি হেডার (header) এবং বডি (body) থাকে। নিচের উদাহরণে এটি আরও বিস্তারিতভাবে দেখানো হয়েছে:
<ul class="collapsible popout">
<li>
<div class="collapsible-header"><i class="material-icons">add_circle</i>First Item</div>
<div class="collapsible-body"><span>This is the first item content</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">remove_circle</i>Second Item</div>
<div class="collapsible-body"><span>This is the second item content</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">more_horiz</i>Third Item</div>
<div class="collapsible-body"><span>This is the third item content</span></div>
</li>
</ul>
এখানে:
- popout: এই ক্লাসটি সেকশনগুলোকে পপ-আউট স্টাইলের মত দেখাবে, যেখানে সেকশনটি খুললে তার আশপাশের সেকশনগুলি সরিয়ে দেওয়া হবে।
- material-icons: আইকন যুক্ত করার জন্য ব্যবহৃত।
Advanced Accordion এবং Collapsible Features
Materialize CSS আরও কিছু উন্নত কনফিগারেশন প্রদান করে, যা আপনার অ্যাকর্ডিয়ন বা কোলাপসিবল উপাদানকে আরও ইন্টারঅ্যাকটিভ এবং ফাংশনাল করে তোলে।
১. Initial Opened Item
আপনি যদি চান যে অ্যাকর্ডিয়ন বা কোলাপসিবল লিস্টে কোন একটি আইটেম প্রথমে খুলে থাকে, তাহলে open ক্লাস ব্যবহার করতে পারেন:
<li class="active">
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><span>Content 1</span></div>
</li>
এখানে active ক্লাস ব্যবহার করা হয়েছে যাতে প্রথম আইটেমটি ডিফল্টভাবে খোলা থাকে।
২. Nested Collapsibles
আপনি একেকটি আইটেমের মধ্যে আরও nested collapsible যোগ করতে পারেন:
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body">
<span>Content 1</span>
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_list</i>Sub Item</div>
<div class="collapsible-body"><span>Sub content here</span></div>
</li>
</ul>
</div>
</li>
</ul>
এখানে একটি nested collapsible যোগ করা হয়েছে, যা মূল কোলাপসিবলের মধ্যে আরও একটি কোলাপসিবল তৈরি করেছে।
উপসংহার
Accordion বা Collapsible Elements হলো ওয়েব ডিজাইনে অত্যন্ত কার্যকরী উপাদান, যা ব্যবহারকারীদের জন্য আরও সুশৃঙ্খল এবং পরিষ্কার কন্টেন্ট উপস্থাপন করতে সাহায্য করে। Materialize CSS এ এই কম্পোনেন্টটি খুবই সহজে তৈরি এবং কাস্টমাইজ করা যায়। আপনি এর মাধ্যমে একাধিক সেকশন প্রদর্শন করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও ইন্টারঅ্যাকটিভ এবং ফাংশনাল করে তোলে।
Read more
