Accordion উইজেট: একর্ডিয়ন প্যানেল তৈরি

Accordion উইজেট jQueryUI এর একটি জনপ্রিয় ফিচার, যা অনেক প্যানেল বা সেকশনের মধ্যে একসাথে শুধুমাত্র একটি প্যানেল খুলে দেখানোর সুবিধা প্রদান করে। এটি সাধারণত ওয়েব পেজে দীর্ঘ কন্টেন্ট প্রদর্শন করার জন্য ব্যবহার করা হয়, যেখানে ব্যবহারকারীরা একটি সেকশন খুলে বাকিটা বন্ধ রাখতে পারে।

এখানে আমরা দেখবো কিভাবে একটি সহজ Accordion প্যানেল তৈরি করা যায় jQueryUI ব্যবহার করে।

১. প্রাথমিক সেটআপ

প্রথমে, আপনাকে jQuery এবং jQueryUI লাইব্রেরি আপনার HTML ফাইলে অন্তর্ভুক্ত করতে হবে। নিচে প্রাথমিক সেটআপের উদাহরণ দেওয়া হলো:

<!-- jQuery লোড -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- jQueryUI স্টাইল শীট -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<!-- jQueryUI স্ক্রিপ্ট -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

২. HTML স্ট্রাকচার

Accordion প্যানেল তৈরি করার জন্য, HTML এর মধ্যে প্রতিটি সেকশনকে একটি div ট্যাগের মাধ্যমে সজ্জিত করতে হবে। এখানে একটি উদাহরণ দেওয়া হলো:

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Content for section 1.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Content for section 2.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Content for section 3.</p>
  </div>
</div>

এখানে, প্রতিটি h3 ট্যাগ হলো Accordion প্যানেলের হেডার এবং div ট্যাগ হলো কন্টেন্টের অংশ।

৩. jQuery কোড ব্যবহার করা

Accordion উইজেটের কার্যকারিতা যোগ করার জন্য, jQuery কোড ব্যবহার করতে হবে। কোডটি নিচে দেওয়া হলো:

$(document).ready(function() {
  $("#accordion").accordion();
});

এই কোডটি #accordion আইডি সহ এলিমেন্টে Accordion উইজেট অ্যাপ্লাই করবে, এবং এটি স্বয়ংক্রিয়ভাবে প্রতিটি সেকশনের মধ্যে একটির ওপেন থাকা নিশ্চিত করবে।

৪. কাস্টমাইজেশন

jQueryUI Accordion উইজেট বেশ কিছু কাস্টমাইজেশন অপশন প্রদান করে, যা ব্যবহার করে আপনি এটি আরো নিয়ন্ত্রণ করতে পারেন। নিচে কিছু সাধারণ কাস্টমাইজেশন দেখানো হলো:

• অ্যাকর্ডিয়ন অটোমেটিকভাবে খোলা থাকবে:

  $(document).ready(function() {
    $("#accordion").accordion({
      active: 0  // প্রথম সেকশনটি ডিফল্টভাবে ওপেন থাকবে
    });
  });
  

• একাধিক সেকশন খোলা থাকতে পারে:

  $(document).ready(function() {
    $("#accordion").accordion({
      collapsible: true,  // একাধিক সেকশন খুলে রাখা যাবে
      active: false       // ডিফল্টভাবে কোন সেকশন খোলা থাকবে না
    });
  });
  

• অ্যানিমেশন ইফেক্ট:

  $(document).ready(function() {
    $("#accordion").accordion({
      animate: 200  // অ্যানিমেশন টাইম (মিলিসেকেন্ডে)
    });
  });
  

৫. ব্যবহারকারী ইন্টারফেস

Accordion উইজেটটি ব্যবহারকারীকে সেকশনগুলির মধ্যে একটির ওপর ক্লিক করে কন্টেন্ট দেখতে বা লুকাতে সাহায্য করে। একবার পেজটি লোড হয়ে গেলে, প্রথম সেকশনটি ডিফল্টভাবে খোলা থাকবে (যদি সেটি কনফিগার করা না থাকে, তবে কোন সেকশনও খোলা থাকবে না)। ব্যবহারকারী অন্য সেকশনে ক্লিক করলে, সেটি খুলে যাবে এবং পূর্বের সেকশনটি বন্ধ হয়ে যাবে।

উপসংহার

Accordion উইজেট jQueryUI-তে একটি অত্যন্ত কার্যকরী উপাদান, যা বিভিন্ন ধরনের কন্টেন্টকে একটি কমপ্যাক্ট, ব্যবহারের জন্য সহজ ইন্টারফেসে উপস্থাপন করে। এটি ওয়েবসাইটে স্থান সাশ্রয় করতে এবং কন্টেন্টের মধ্যে দ্রুত নেভিগেট করতে সাহায্য করে। jQueryUI Accordion উইজেটটি বিভিন্ন কাস্টমাইজেশন অপশন এবং অ্যানিমেশন ফিচার নিয়ে আসে, যা একে আরও বেশি কার্যকরী এবং ব্যবহারকারী-বান্ধব করে তোলে।