info@freetimelearning.com
Facebook
Twitter
Linkedin
Google
HOME
TUTORIALS
BASICS OF COMPUTER SCIENCE
HTML
HTML5
CSS
CSS3
BOOTSTRAP
BOOTSTRAP 4
MATERIALIZE CSS
JAVASCRIPT
JQUERY
AJAX
ANGULARJS
C - LANGUAGE
JAVA
PHP
PYTHON
SEO
REFERENCES
PRACTICE TEMPLATES
Bootstrap Templates
PHP PROJECTS
Bootstrap 3 Plugins
Bootstrap 4 Plugins
PLUGINS
Static Menus
Responsive Menus
Dropdown
Tabs & Pills
Modal Boxes (Dialog box)
Gallery Plugins
Sliders
Buttons
Dynamic Forms
Forms
Image Effects
Examples
HTML
HTML5
CSS
CSS3
BOOTSTRAP3
JAVASCRIPT
JQUERY
ANGULARJS
INTERVIEW QUESTIONS
New
QUIZ
New
MORE
Online HTML Editor
New
GENERAL KNOWLEDGE
New
SCHOOL MATHEMATICS
Blog
EXECUTE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 3 Snippets, Bootstrap Tree View, Free Time Learning</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <style type="text/css"> div.panel:first-child { margin-top:20px; } div.treeview { min-width: 100px; min-height: 100px; max-height: 256px; overflow:auto; padding: 4px; margin-bottom: 20px; color: #369; border: solid 1px; border-radius: 4px; } div.treeview ul:first-child:before { display: none; } .treeview, .treeview ul { margin:0; padding:0; list-style:none; color: #369; } .treeview ul { margin-left:1em; position:relative } .treeview ul ul { margin-left:.5em } .treeview ul:before { content:""; display:block; width:0; position:absolute; top:0; left:0; border-left:1px solid; bottom:15px; } .treeview li { margin:0; padding:0 1em; line-height:2em; font-weight:700; position:relative } .treeview ul li:before { content:""; display:block; width:10px; height:0; border-top:1px solid; margin-top:-1px; position:absolute; top:1em; left:0 } .tree-indicator { margin-right:5px; cursor:pointer; } .treeview li a { text-decoration: none; color:inherit; cursor:pointer; } .treeview li button, .treeview li button:active, .treeview li button:focus { text-decoration: none; color:inherit; border:none; background:transparent; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; outline: 0; } </style> <div class="container"> <div class="panel panel-default"> <div class="panel-heading">Treeview List</div> <div class="panel-body"> <!-- TREEVIEW CODE --> <ul class="treeview"> <li><a href="#">Free Time Learning</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">HTML5</a> <ul> <li><a href="#">Events</a></li> <li><a href="#">Events</a></li> <li><a href="#">Events</a> <ul> <li><a href="#">onbeforeunload</a></li> <li><a href="#">onerror</a></li> <li><a href="#">onafterprint</a></li> <li><a href="#">onstorage</a> <ul> <li><a href="#">dragStart</a></li> <li><a href="#">dragEnter</a></li> <li><a href="#">dragOver</a></li> <li><a href="#">dragLeave</a></li> <li><a href="#">drag</a></li> <li><a href="#">drop</a></li> <li><a href="#">dragEnd</a></li> </ul> </li> <li><a href="#">onundo</a></li> <li><a href="#">onunload</a></li> </ul> </li> <li><a href="#">Events</a></li> </ul> </li> <li><a href="#">CSS</a></li> <li><a href="#">CSS3</a></li> </ul> </li> </ul> <!-- TREEVIEW CODE --> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Treeview Div</div> <div class="panel-body"> <!-- TREEVIEW CODE --> <div class="treeview"> <ul> <li><a href="#">Free Time Learning</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">HTML5</a> <ul> <li><a href="#">Events</a></li> <li><a href="#">Events</a></li> <li><a href="#">Events</a> <ul> <li><a href="#">onbeforeunload</a></li> <li><a href="#">onerror</a></li> <li><a href="#">onafterprint</a></li> <li><a href="#">onstorage</a> <ul> <li><a href="#">dragStart</a></li> <li><a href="#">dragEnter</a></li> <li><a href="#">dragOver</a></li> <li><a href="#">dragLeave</a></li> <li><a href="#">drag</a></li> <li><a href="#">drop</a></li> <li><a href="#">dragEnd</a></li> </ul> </li> <li><a href="#">onundo</a></li> <li><a href="#">onunload</a></li> </ul> </li> <li><a href="#">Events</a></li> </ul> </li> <li><a href="#">CSS</a></li> <li><a href="#">CSS3</a></li> </ul> </li> </ul> </div> <!-- TREEVIEW CODE --> </div> </div> </div> <script type="text/javascript"> $.fn.extend({ treeview: function() { return this.each(function() { var tree = $(this); tree.addClass('treeview-tree'); tree.find('li').each(function() { var stick = $(this); }); tree.find('li').has("ul").each(function () { var branch = $(this); //li with children ul branch.prepend("<i class='tree-indicator glyphicon glyphicon-chevron-right'></i>"); branch.addClass('tree-branch'); branch.on('click', function (e) { if (this == e.target) { var icon = $(this).children('i:first'); icon.toggleClass("glyphicon-chevron-down glyphicon-chevron-right"); $(this).children().children().toggle(); } }) branch.children().children().toggle(); branch.children('.tree-indicator, button, a').click(function(e) { branch.click(); e.preventDefault(); }); }); }); } }); $(window).on('load', function () { $('.treeview').each(function () { var tree = $(this); tree.treeview(); }) }) </script> </body> </html>
×
Close
Bootstrap 3 Snippets, Bootstrap Tree View, Free Time Learning<
Sample Data
