CSS এবং জাভাস্ক্রিপ্ট দিয়ে ট্রি ভিউ (Tree View) তৈরি

নেস্টেড লিস্ট এবং জাভাস্ক্রিপ্ট ক্লিক ইভেন্ট ব্যবহার করে ফাইল এক্সপ্লোরার শৈলীর ট্রি ভিউ তৈরি করা যায়।

উদাহরণ: ট্রি ভিউ

<!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;
  }
  ul, #treeUL {
    list-style-type: none;
  }
  #treeUL {
    margin: 0;
    padding: 0;
  }
  .rootTree {
    cursor: pointer;
    user-select: none;
    font-size: 18px;
    font-weight: bold;
    color: blue;
  }
  li {
    font-size: 16px;
    color: crimson;
    font-weight: 500;
  }
  .rootTree::before {
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
  }
  .rootTree-down::before {
    transform: rotate(90deg);
  }
  .children {
    display: none;
  }
  .active {
    display: block;
  }
</style>
</head>
<body>
  <h1>ট্রি ভিউ উদাহরণ</h1>
  <ul id="treeUL">
    <li>
      <span class="rootTree">রুট</span>
      <ul class="children">
        <li>/bin</li>
        <li>/etc</li>
        <li>
          <span class="rootTree">/home</span>
          <ul class="children">
            <li>/home/Downloads</li>
            <li>/home/Pictures/</li>
            <li>
              <span class="rootTree">/home/Desktop</span>
              <ul class="children">
                <li>/home/Desktop/file.txt</li>
                <li>/home/Desktop/file1.mp3</li>
                <li>/home/Desktop/file1.mp4</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <script>
    var toggler = document.querySelectorAll(".rootTree");
    Array.from(toggler).forEach(item => {
      item.addEventListener("click", () => {
        item.parentElement.querySelector(".children").classList.toggle("active");
        item.classList.toggle("rootTree-down");
      });
    });
  </script>
</body>
</html>

কোড ব্যাখ্যা

• ::before pseude-element: তীর চিহ্ন (▶) দেখায়।
• .rootTree-down::before { transform: rotate(90deg); }: ওপেন অবস্থায় তীর নিচে দিয়ে থাকে।
• .children { display: none; } .active { display: block; }: টগল করে শো/হাইড।
• JavaScript: সব `.rootTree` এলিমেন্টে ক্লিক ইভেন্ট লিস্টেনার যোগ করে ক্লাস টগল করে।

উন্নতি

ARIA অ্যাট্রিবিউট (`aria-expanded`, `role="treeitem"`) যোগ করলে অ্যাকসেসিবিলিটি বেড়ে।