জাভাস্ক্রিপ্ট দিয়ে এলিমেন্ট লুকানো/দেখানো টগল করা

জাভাস্ক্রিপ্ট ব্যবহার করে একটি এলিমেন্ট লুকানো বা দেখানো টগল করার কোড নিচে দেওয়া হলো −

উদাহরণ

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    button {       padding: 10px;       border: none;       background-color: rgb(51, 51, 192);       color: white;       font-size: 18px;    }    .div-visible {       width: 100%;       padding: 50px 0;       text-align: center;       background-color: rgb(210, 230, 173);       margin-top: 20px;       font-size: 18px;       font-weight: 500;    } </style> </head> <body> <h1>টগল হাইড এবং শো উদাহরণ</h1> <button class="toggleDisplay">Div লুকান</button> <h2>উপরের বাটনে ক্লিক করলে নিচের div লুকাবে</h2> <div class="div-visible"> This is a div element </div> <script>    document .querySelector(".toggleDisplay") .addEventListener("click", toggleDivDisplay);    function toggleDivDisplay() {       var x = document.querySelector(".div-visible");       if (x.style.display === "none") {          x.style.display = "block";       } else {          x.style.display = "none";       }    } </script> </body> </html>

আউটপুট

উপরের কোড নিচের আউটপুট দেবে −

“Div লুকান” বাটনে ক্লিক করলে −