সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে কোল্যাপসিবল সেকশন তৈরি করা

সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি কোল্যাপসিবল (সঙ্কুচিত/বিস্তার্য) সেকশন তৈরি করার কোড নিচে দেওয়া হলো −

উদাহরণ

<!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;    }    .collapse {       background-color: rgb(83, 186, 255);       color: white;       cursor: pointer;       padding: 18px;       width: 100%;       border: none;       text-align: left;       outline: none;       font-size: 18px;    }    .active, .collapse:hover {       background-color: rgb(34, 85, 160);    }    .content {       padding: 0 18px;       display: none;       overflow: hidden;       background-color: #b6fdff;       font-size: 18px;    } </style> </head> <body> <h1>কোল্যাপসিবল উদাহরণ</h1> <h2>নিচের কোল্যাপসিবলে ক্লিক করে কন্টেন্ট দেখুন</h2> <button type="button" class="collapse">কোল্যাপসিবল খুলুন</button> <div class="content"> <h3> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, ducimus! </h3> </div> <script>    var collapse = document.querySelector(".collapse");    var i;    collapse.addEventListener("click", function() {       this.classList.toggle("active");       var content = this.nextElementSibling;       if (content.style.display === "block") {          content.style.display = "none";       } else {          content.style.display = "block";       }    }); </script> </body> </html>

আউটপুট

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

“কোল্যাপসিবল খুলুন”-এ ক্লিক করলে −