CODEWITHSUNDEEP
javascriptjquerytree
Ilya Bibik
Ilya Bibik

Reputation: 4124

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>

Upvotes: 0

Views: 708

Answers (2)

Hugo S. Mendes
Hugo S. Mendes

Reputation: 1086

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');

Upvotes: 1

Jack B
Jack B

Reputation: 391

Use <ul class="nav nav-list tree" style="display:none;">. Wat jquery toggle does, is set display to either none (hidden) or block (visible.)

Upvotes: 1

Related Questions