যেক্যুয়েরী এর Toggle এফেক্ট বেশ জনপ্রিয় একটি এফেক্ট। খুব অল্প কিছু যেক্যুয়েরী কোড ব্যবহার করে এই Toggle এফেক্ট তৈরি করা যায়। এখানে যেক্যুয়েরী toggle এফেক্ট এর একটি ব্যাবহারিক উদাহরণ দেখুন।
If you click on the "Toggle" button, This text will disappear. For visible the text click the button again.
hide এবং show এফেক্ট এর কাজ একটি মাত্র মেথড দিয়ে করা যায়, এই মেথড টি হল toggle() মেথড, অর্থাৎ toggle() মেথড ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট কে অদৃশ্য করা যায় এবং পুনরায় দৃশ্যমান করা যায়। নিচে যেক্যুয়েরী এর toggle এফেক্ট ব্যবহার এর সিনট্যাক্স দেখুন।
$(selector).toggle(); $(selector).toggle(speed, callback); $(selector).toggle(speed, easing, callback); $(selector).toggle(display);
এখানে speed, easing এবং callback হল কয়েকটি অপশনাল প্যারামিটার, এটি মূলত একটি ফাংশন যা toggle() মেথড সম্পূর্ণ হবার পরে execute হয়। এই প্যারামিটার গুলো ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট অদৃশ্য অর্থাৎ hide এবং দৃশ্যমান অর্থাৎ show হবার গতি বা speed বাড়াতে বা কমাতে পারি।
toggle() মেথড এর এই অপশনাল প্যারামিটার গুলোর মান "slow", "fast", বা মিলিসেকেন্ড হতে পারে। নিচে একটি উদাহরণ দেখুন, যেখানে toggle() মেথড এর সাথে এই অপশনাল প্যারামিটার ব্যবহার করা হয়েছে।
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> <script> $(document).ready(function(){ $("button").click(function(){ $("p#toggle-text").toggle(1500); }); }); </script> </head> <body> <button>Toggle</button> <p id="toggle-text"> If you click on the "Toggle" button, This text will disappear. For visible the text click the button again. </p> </body> </html>
শেয়ার করুন
