Praveen Singh

SIMPLE TREE WIDGET USING JQUERY

SIMPLE TREE WIDGET USING JQUERY

This article explain, how to create a simple tree widget using JQuery without any UI library.

live demo


Tree widget code



 

<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#treePane ul {
 list-style: none;
}

#treePane .node {
 color: red;
 background-image: url("plus.gif");
 background-position: left center;
 background-repeat: no-repeat;
 padding-left: 12px;
 cursor: pointer;
}

#treePane .open {
 background-image: url("minus.gif");
}

#treePane ul li {
 background-image: url("treeview-default-line.gif");
 background-repeat: no-repeat;
 padding-left: 20px;
 margin-left: -42px;
}
</style>
</head>
<body>
 <div id="treePane">
  <ul>
   <li><label class="node">Folder1</label>
    <ul>
     <li>Content 1</li>
     <li>Content 2</li>
    </ul></li>
   <li><label class="node open">Folder2</label>
    <ul>
     <li>Content 3</li>
     <li><label class="node">Folder3</label>
      <ul>
       <li>Content 5</li>
       <li>Content 6</li>
      </ul></li>
    </ul></li>
  </ul>
 </div>
 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script type="text/javascript">
 
 (function() {
  var treePaneNodes = $('#treePane').find(".node");
  treePaneNodes.next("ul").hide();
  $('#treePane').find(".open").next("ul").show();;
  treePaneNodes.on('click', function() {
   $(this).next("ul").first().toggle();
   $(this).toggleClass("open");
  })
 })();
 </script>
</body>
</html>

Tutorial + demo + discussion video



Codes as zip file


TreePane.zip 

 

2 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete