jQuery toggle() মেথডকে একটি লাইটসইচ (lightswitch) হিসেবে ভাবা যেতে পারে। কল করলে, এটি সিলেক্ট করা এলিমেন্টগুলোক "on" বা "off" করে। অর্থাৎ, এটি এলিমেন্টগুলো ব্যবহারকারীর কাছে রেন্ডার করার মধ্যে বা লুকাতে রাখার মধ্যে টগল করে। নিচের উদাহরণে, আমরা toggle() ব্যবহার করে কীভাবে একটি বাটন ক্লিক করলে টেক্সট লুকানো এবং দেখানো যায় তা এক্সপ্লোর করব।
jQuery toggle() কী?
jQuery toggle() মেথড একটি ওয়েব পৃষ্ঠায় সিলেক্ট করা এলিমেন্টগুলো প্রদর্শন বা লুকাতে रखে। শব্দের অর্থ অনুযায়ী, এই মেথডটি একটি লাইটসইচের মতো কাজ করে এলিমেন্টগুলোক "on" বা "off" করে। সাধারণত toggle() মেথডটি HTML বাটনগুলোর সাথে কল করা হয়, কিন্তু আসলে যেকোনো সিলেক্ট করা এলিমেন্টে এটি কল করা যায়।
"on" এবং "off" এর মধ্যে ডিসপ্লে টগল করার পাশাপাশি, jQuery toggle() duration (সময়কাল) এর জন্য একটি আর্গুমেন্ট নেয়। Duration আর্গুমেন্টটি সংখ্যা বা স্ট্রিং ডেটা টাইপ হতে পারে। Duration আর্গামেন্ট দিলে নির্দিষ্ট সময় ধরে একটি অ্যানিমেশন তৈরি হবে।
jQuery toggle() অ্যানিমেশন শেষ হলে এক্সিকিউট হওয়ার জন্য একটি কলব্যাক ফাংশনও নেয়। মনে রাখবেন, একটি কলব্যাক ফাংশন হলো একটি ফাংশন যা অন্য একটি ফাংশনে পাস করা হয় যাতে সেটি পরে এক্সিকিউট হয়। কোনো আর্গুমেন্ট না দিলে, toggle() সাধারনভাবেই ডিসপ্লে "on" বা "off" করবে।
চলুন বেসিক সিনট্যাক্স দেখি এবং তারপর উদাহরণ কোডের মাধ্যমে গভীরে যাই। আমাদের উদাহরণ কোডে একটি ছবি এবং টেক্সটের মধ্যে অ্যানিমেশন টগলিং কভার করা হবে।
toggle() jQuery সিনট্যাক্স
প্রস্তাবনায় উল্লিখিত/default: jQuery toggle() মেথডটি ডিফল্টরূপে একটি লাইটসইচ হিসেবে ভাবা যেতে পারে। একবার ক্লিক করলে, এটি সিলেক্ট করা এলিমেন্টকে ডিসপ্লেতে "on" বা "off" করে। যেকোনো jQuery মেথডের মতো, toggle() কল করার আগে একটি এলিমেন্ট সিলেক্ট করতে হয়।
কোনো আর্গুমেন্ট ছাড়া toggle() ব্যবহার করার একটি উদাহরণ দেখি। আমাদের HTML ফাইল দিয়ে শুরু করি:
<button> Click me </button> <p> Read me! </p> <p id="hide" style="display: none"> NO! Read ME! </p>
এখান থেকে, আমরা দেখতে পাচ্ছি আমাদের HTML ফাইলটি একটি বাটন এবং দুটি প্যারাগ্রাফ ট্যাগ রেন্ডার করছে। "hide" আইডি 가진 <p> ট্যাগের style অ্যাট্রিবিউটে লক্ষ্য করুন। Display কে none সেট করলে সেই প্যারাগ্রাফ এলিমেন্টটি ডিসপ্লে থেকে লুকিয়ে থাকবে।
আমাদের HTML ফাইলটি আমাদের অনুমান অনুযায়ী রেন্ডার হচ্ছে। এখন jQuery toggle ব্যবহার করে লুকানো <p> ট্যাগটি দেখাব। এই উদাহরণে, আমরা আমাদের jQuery কে HTML ফাইলের ভিতরেই রাখব। এর জন্য, আমাদের jQuery কে একটি <script> ট্যাগে র্যাপ করতে হবে:
<script>
$("button").click(function() {
$("#hide").toggle();
})
</script>
সকল jQuery মেথডের মতো, আমাদের প্রথমে একটি এলিমেন্ট সিলেক্ট করতে হবে। এখানে, আমরা বাটন এলিমেন্টটি সিলেক্ট করেছি এবং click() মেথড কল করেছি। click() মেথডটি মূলত সিলেক্ট করা বাটনে একটি ইভেন্ট লিসেনার সংযুক্ত করে। একবার বাটন ক্লিক হলে, এটি কলব্যাক ফাংশনটি কল করে এবং আমাদের toggle() মেথডটি এক্সিকিউট করে। jQuery click() সম্পর্কে আরও জানতে এখানে ক্লিক করুন।
আমাদের কোডটি একশনে দেখি।
বাহ! বাটনে ক্লিক করলে লুকানো প্যারাগ্রাফ ট্যাগটি প্রদর্শিত হয়েছে। এখন আমরা toggle() এর সিনট্যাক্স সাথে পরিচিত, আসুন অ্যানিমেশন ব্যবহার করে একটি উদাহরণ দেখি।
jQuery toggle() একশনে
এতক্ষণে আমরা দেখেছি toggle() কীভাবে সিলেক্ট করা এলিমেন্টগুলো ডিসপ্লেতে লুকাতে বা দেখাতে পারে। এখন, একটু জটিল একটি অ্যানিমেশন উদাহরণ দেখি যেটি উপরের সেকশন থেকে কিছুটা ভিন্ন। চিন্তা করবেন না, আমরা উপরের সেকশনে অধিকাংশ কনসেপ্ট আলোচনা করেছি!
আমাদের উদাহরণের জন্য, আমরা একটি বাটন, একটি ছবি, এবং একটি <p> ট্যাগে মোড়ানো কিছু টেক্সট রেন্ডার করব। আমাদের HTML ফাইলটি কিছু এই রকম দেখাবে:
<button> Click me </button> <img id="cat" src="https://images.pexels.com/photos/2256259/pexels-photo-2256259.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> <p style="display: none"> Animation Complete </p>
আবার লক্ষ্য করুন, আমাদের প্যারাগ্রাফ এলিমেন্টটি display অ্যাট্রিবিউটের মান "display: none" হওয়ায় লুকানো থাকবে।
আমাদের লাকি কিটি (Lucky Kitty) বাটনের পাশাপাশি রেন্ডার হচ্ছে। আমাদের <p> ট্যাগের style অ্যাট্রিবিউট "display: none" সেট থাকায় টেক্সটটি লুকানো আছে। এখন, ধীরে ধীরে ছবিটি লুকিয়ে টেক্সটটি দেখানোর চেষ্টা করি যখন বাটনে ক্লিক করা হবে।
jQuery toggle-এ duration আর্গুমেন্টটি সংখ্যা বা স্ট্রিং হতে পারে। যদি এটি সংখ্যা হয়, তবে সেই সংখ্যাটি মিলিসেকেন্ড উপস্থাপন করে। স্ট্রিং ভ্যালুর জন্য, toggle() "fast" বা "slow" এক্সেপ্ট করে, যেগুলো যথাক্রমে ৬০০ বা ২০০ মিলিসেকেন্ড।
উদাহরণস্বরূপ, আমরা ধীরে ধীরে ছবিটি লুকাতে চাই, তাই toggle()-এ আর্গুমেন্ট হিসেবে "slow" ব্যবহার করব। প্রথম উদাহরণের মতো, আমরা আমাদের jQuery কে HTML ফাইলের নিচে একটি script ট্যাগে র্যাপ করব।
<script>
$('button').click(function() {
$('#cat').toggle('slow', function() {
$('p').toggle();
})
})
</script>
বাটন সিলেক্ট করে click() কল করার পর, আমাদের প্রথম কলব্যাক ফাংশনটি আমাদের ক্যাট ফটোটি লুকায়। toggle()-এ স্ট্রিং "slow" পাস করে, আমরা তারপর একটি অতিরিক্ত কলব্যাক ফাংশন পাস করতে পারি। এই কলব্যাক ফাংশনটি ২০০ মিলিসেকেন্ড बीत जाने के পর এক্সিকিউট হবে।
আমাদের "slow" টাইম এক্সপায়ার হলে, আমরা তখন আমাদের প্যারাগ্রাফ এলিমেন্টটি "on" করব। এখন এটি ইউজারকে <p> ট্যাগটি দেখাবে।
আমাদের হ্যান্ডি gif-র মাধ্যমে দেখতে পাচ্ছি যে ছবিটি কিছু সময় নেয় লুকাতে এবং তাৎক্ষণিকভাবে আমাদের টেক্সট দ্বারা প্রতিস্থাপিত হয়। toggle()-এর বিভিন্ন ব্যবহার কাম্বাইন করে, আমরা কম লাইনের কোডে একটি ডাইনামিক অ্যানিমেশন তৈরি করেছি।
উপসংহার
আমরা আলোচনা করেছি jQuery toggle() কী এবং এটি কী করে। তারপর কিছু উদাহরণ কোডের সাথে সিনট্যাক্স দেখেছি। তারপর, আমরা যা শিখেছি সেটা সব একসাথে মিলিয়ে একটি ছবির সাথে সিম্পল অ্যানিমেশন তৈরি করেছি।
এখন আপনি jQuery toggle() সাথে পরিচিত, আপনি আপনার পরবর্তী প্রজেক্টে এলিমেন্টগুলো টগল করা শুরু করতে পারেন। অথবা বাটন ক্লিক করলে ছবিতে অ্যানিমেশন যোগ করতে পারেন। আপনি যদি jQuery toggle() সম্পর্কে আরও পড়তে চান, অফিসিয়াল ডকুমেন্টেশন পড়ুন। হ্যাপি কোডিং!
