"collapsible_menu simple "
Bootstrap 4.1.1 Snippet by prakash27dec

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul class="satishraj-tree-container"> <li class="tree-li is-child"> <input class="filled-in" type="checkbox"> <label for=""></label> <span class="text">Prakash</span> <ul class="tree-ul"> <li class="tree-li is-child"> <input class="filled-in" type="checkbox"> <label for=""></label> <span class="text"><a href="javascript:;">Meeting Room 1</a></span> <ul class="tree-ul"> <li class="tree-li"> <input class="filled-in" type="checkbox"> <label for=""></label> <span class="text"><a href="javascript:;">Test Location 1</a></span> <ul class="tree-ul"> <li class="tree-li"> <input class="filled-in" type="checkbox"> <label for=""></label> <span class="text"><a href="javascript:;">Test Location 1.1</a></span> </li> <li class="tree-li"> <input class="filled-in" type="checkbox"> <label for=""></label> <span class="text"><a href="javascript:;">Test Location 1.2</a></span> <ul class="tree-ul"> <li class="tree-li"> <input class="filled-in" type="checkbox"> <label for=""></label> <span class="text"><a href="javascript:;">Test Location 1.2.1</a></span> </li> <li class="tree-li"> <input class="filled-in" type="checkbox"> <label for=""></label> <span class="text"><a href="javascript:;">Test Location 1.2.2</a></span> </li> </ul> </li> </ul> </li> <li class="tree-li"> <input class="filled-in" type="checkbox"> <label for=""></label> <span class="text"><a href="javascript:;">Test Location 2</a></span> <ul class="tree-ul"> <li class="tree-li"> <input class="filled-in" type="checkbox"> <label for=""></label> <span class="text"><a href="javascript:;">Test Location 2.1</a></span> </li> <li class="tree-li"> <input class="filled-in" type="checkbox"> <label for=""></label> <span class="text"><a href="javascript:;">Test Location 2.2</a></span> </li> </ul> </li> </ul> </li> <li class="tree-li is-child"> <input class="filled-in" type="checkbox"> <label></label> <span class="text"><a href="javascript:;">Meeting Room2</a></span> <ul class="tree-ul"> <li class="tree-li"> <input class="filled-in" type="checkbox"> <label></label> <span class="text"><a href="javascript:;">Meeting Room 1</a></span> <ul class="tree-ul"></ul> </li> <li class="tree-li"> <input class="filled-in" type="checkbox"> <label></label> <span class="text"><a href="javascript:;">Meeting Room 2</a></span> <ul class="tree-ul"></ul> </li> </ul> </li> </ul> </li> </ul>
body { background:#967432; color:#fff; } a { color:#fff; } .satishraj-tree-container { padding: 10px !important; cursor: pointer; } .satishraj-tree-container .tree-li { padding: 2px !important; word-wrap: break-word; list-style:none; } .satishraj-tree-container .tree-li .tree-ul { padding-left: 20px !important; } .satishraj-tree-container .tree-li .tree-ul.diactive { display: none; } .satishraj-tree-container .tree-li .text { top: -3px; position: relative; } .satishraj-tree-container .tree-li.is-child > .text:before { content: "\25BE"; font-size: 22px; top: 2px; position: relative; padding-right: 5px; } .satishraj-tree-container .tree-li.is-child.diactive > .text:before { content: "\25B8" !important; } .satishraj-tree-container .tree-li [type="checkbox"] + label { padding-left: 25px !important; }
$(document).ready(function(){ function checkSatishRajTreeCollaps() { $(".satishraj-tree-container li.tree-li").removeClass("is-child") $(".satishraj-tree-container li.tree-li").each(function () { if ($(this).find("ul.tree-ul li").length > 0) { $(this).addClass("is-child") } }); $(".satishraj-tree-container li.tree-li span.text").unbind("click"); $(".satishraj-tree-container li.tree-li.is-child span.text").click(function () { $(this).parent(".tree-li").toggleClass("diactive"); $(this).parent(".tree-li").find(".tree-ul:first").toggleClass("diactive"); }); } checkSatishRajTreeCollaps() });

Related: See More


Questions / Comments: