Collapsible কম্পোনেন্ট Materialize CSS-এ একটি অত্যন্ত জনপ্রিয় এবং কার্যকরী উপাদান, যা সাধারণত একটি লম্বা তালিকা বা মেনু ব্যবস্থাপনা করতে ব্যবহৃত হয়। এর মাধ্যমে ব্যবহারকারী একযোগভাবে একটি বা একাধিক আইটেম সম্প্রসারণ করতে পারেন, যাতে তারা প্রয়োজনীয় তথ্য দেখতে বা ইন্টারঅ্যাকশন করতে পারেন। Collapsible সাধারণত accordion-style ড্রপডাউন হিসেবে কাজ করে, যেখানে একাধিক সেকশন থাকে এবং একটি সেকশন একে একে প্রসারিত বা সংকুচিত হয়।
এখানে Single Expandable এবং Multiple Expandable Collapsible তৈরি করার পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।
Single Expandable Collapsible
Single Expandable Collapsible হলো এমন একটি মেনু বা তালিকা যেখানে একবারে শুধুমাত্র একটি সেকশন এক্সপ্যান্ড (প্রসারিত) হয়। অন্য কোন সেকশন এক্সপ্যান্ড করার সাথে সাথে পূর্ববর্তী সেকশনটি সংকুচিত হয়ে যায়।
Single Expandable Collapsible উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Expandable Collapsible</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Collapsible Structure -->
<ul class="collapsible">
<li>
<div class="collapsible-header">Item 1</div>
<div class="collapsible-body"><span>This is item 1 content.</span></div>
</li>
<li>
<div class="collapsible-header">Item 2</div>
<div class="collapsible-body"><span>This is item 2 content.</span></div>
</li>
<li>
<div class="collapsible-header">Item 3</div>
<div class="collapsible-body"><span>This is item 3 content.</span></div>
</li>
</ul>
<!-- Materialize JS Link -->
<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>
<!-- Initialize Collapsible -->
<script>
$(document).ready(function(){
$('.collapsible').collapsible();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- collapsible-header: এটি একটি ক্লিকেবল হেডার যা ব্যবহারকারী ক্লিক করলে সেকশন এক্সপ্যান্ড হবে।
- collapsible-body: এটি প্রতিটি এক্সপ্যান্ড হওয়া সেকশনের কন্টেন্ট।
- $('.collapsible').collapsible();: এটি Materialize এর জাভাস্ক্রিপ্ট ফাংশন যা collapsible কম্পোনেন্টকে কার্যকরী করে।
এখানে single-expandable সেটিং ডিফল্টভাবে সক্রিয় থাকে, যেখানে একবারে শুধুমাত্র একটি সেকশন এক্সপ্যান্ড করা যায়।
Multiple Expandable Collapsible
Multiple Expandable Collapsible-এ একাধিক সেকশন একযোগে এক্সপ্যান্ড হতে পারে। এটি তখন কার্যকরী যখন আপনি চাইবেন যে একাধিক সেকশন একই সময়ে এক্সপ্যান্ড হতে পারে এবং অন্য সেকশনগুলো একই সময় সংকুচিত না হয়ে এক্সপ্যান্ড হয়ে থাকে।
Multiple Expandable Collapsible উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Expandable Collapsible</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Collapsible Structure (Multiple Expandable) -->
<ul class="collapsible expandable">
<li>
<div class="collapsible-header">Item 1</div>
<div class="collapsible-body"><span>This is item 1 content.</span></div>
</li>
<li>
<div class="collapsible-header">Item 2</div>
<div class="collapsible-body"><span>This is item 2 content.</span></div>
</li>
<li>
<div class="collapsible-header">Item 3</div>
<div class="collapsible-body"><span>This is item 3 content.</span></div>
</li>
</ul>
<!-- Materialize JS Link -->
<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>
<!-- Initialize Collapsible -->
<script>
$(document).ready(function(){
$('.collapsible').collapsible({
accordion: false // Set accordion to false to allow multiple collapsible sections to expand at once
});
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- expandable: এটি ক্লাস যোগ করা হয়েছে, যাতে একাধিক সেকশন একসাথে এক্সপ্যান্ড করা যেতে পারে।
- accordion: false: এই সেটিংটি Materialize এর জাভাস্ক্রিপ্ট কনফিগারেশনে ব্যবহার করা হয়, যা একাধিক সেকশন একযোগে এক্সপ্যান্ড করার সুবিধা প্রদান করে।
এখানে multiple-expandable সেটিং সক্রিয় করা হয়েছে, যার মাধ্যমে একাধিক সেকশন একযোগে এক্সপ্যান্ড হবে এবং কোনো সেকশন সংকুচিত হবে না।
উপসংহার
Materialize CSS-এর Collapsible কম্পোনেন্ট আপনাকে খুব সহজে single-expandable বা multiple-expandable মেনু বা তালিকা তৈরি করতে সহায়তা করে। Single Expandable Collapsible সাধারণত ব্যবহৃত হয় যখন আপনি একবারে শুধুমাত্র একটি সেকশন এক্সপ্যান্ড করতে চান, আর Multiple Expandable Collapsible ব্যবহৃত হয় যখন একাধিক সেকশন একসাথে এক্সপ্যান্ড করা সম্ভব হয়। Materialize এর সহজ এবং শক্তিশালী এই কম্পোনেন্টটি ওয়েব ডিজাইনে অত্যন্ত কার্যকরী।
Read more
