John Goldman John Goldman - 7 months ago 17
Javascript Question

tree-toggle to be closed on load

I don't know js but have to occasionally use it, so sorry if question is trivial but I try diffrent things and they don't work for me.

So I have a tree and I have this script that actually works and hides displays the tree branches when clicked.

However by default the tree is open. How can I force the tree to be closed when it first loads?

<!--

- HIDE DISPLAY TREE BRANCH WHEN CLICKED ON HEAD ITEM -->
<script>
$(document).ready(fu

nction () {
$('label.tree-toggler').click(function () {
$(this).parent().children('ul.tree').toggle(300);
});
});
</script>


this is my source html

<ul class="nav nav-list tree">




<li><div>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
S: # 2 Men Fashion (<i> <a href="/item/subcategory/subcategory_details/2"> Details </a> - <a href="/item/itemgroup/new/2/http://127.0.0.1:8000/item/category/list/%3Fid=2&name=&keywords=&author=&creation_time=/">Add Itemgroup</a> -
<a href="/item/subcategory/edit/2/http://127.0.0.1:8000/item/category/list/%3Fid=2&name=&keywords=&author=&creation_time=/">Edit</a> -
<a href="/item/subcategory/delete/2/http://127.0.0.1:8000/item/category/list/%3Fid=2&name=&keywords=&author=&creation_time=/">Delete</a></i>)</div>
<ul class="nav nav-list tree">




<li><div><i>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
I: # 21 ffdsfdsf </i>(<i><a href="/item/itemgroup/itemgroup_details/21">Details </a>-
<a href="/item/itemgroup/edit/21/http://127.0.0.1:8000/item/category/list/%3Fid=2&name=&keywords=&author=&creation_time=/">Edit</a> -
<a href="/item/itemgroup/delete/21/http://127.0.0.1:8000/item/category/list/%3Fid=2&name=&keywords=&author=&creation_time=/">Delete</a></i>)</div>



</li>




<li><div><i>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
I: # 22 saddascsa </i>(<i><a href="/item/itemgroup/itemgroup_details/22">Details </a>-
<a href="/item/itemgroup/edit/22/http://127.0.0.1:8000/item/category/list/%3Fid=2&name=&keywords=&author=&creation_time=/">Edit</a> -
<a href="/item/itemgroup/delete/22/http://127.0.0.1:8000/item/category/list/%3Fid=2&name=&keywords=&author=&creation_time=/">Delete</a></i>)</div>



</li>




</ul>



</li>

Answer

you can either use css adding display:none to your ul

like <ul class="nav nav-list tree" style="display:none">

or call a jquery when the page is loaded $(this).parent().children('ul.tree').css('display', 'none');

Comments