در این مقاله یک درخت یک لیست تو در تو را به وسیله Jquery پیاده سازی میکنیم. این Tree View زیر شاخه های خود را به صورت انیمیشن و با مدت زمانی کوتاه برای باز شدن نمایش می دهد.

یک فایل html با نام AutoCollapseTreeView.html ایجاد نمایید. 

<ul id="Decor">
        <li class="level1">خانه من
	        <ul>
                <li class="level2">کار من
		            <ul>
                        <li><a href="#">برنامه نویسی</a></li>
                        <li><a href="#">اموزش</a></li>
                    </ul>
                </li>
                <li class="level2">تفریح من
		            <ul>
                        <li><a href="#">برنامه نویسی</a></li>
                        <li><a href="#">کتاب خواندن</a></li>
                    </ul>
                </li>
                <li class="level2">سفر من
		            <ul>
                        <li><a href="#">شمال</a></li>
                        <li><a href="#">جنوب</a></li>
                        <li><a href="#">برنامه دیگه ای ندارم</a></li>
                    </ul>
                </li>
                <li class="level2">ایده های من
		            <ul>
                        <li class="level3">اولین ایده
			            <ul>
                            <li><a href="#">برنامه خوب</a></li>
                            <li><a href="#">برنامه عالی</a></li>
                        </ul>
                        </li>
                        <li class="level3">اوقات فراغت
			            <ul>
                            <li><a href="#">پارک</a></li>
                            <li><a href="#">بازار</a></li>
                        </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="level1">برنامه روزانه
	        <ul>
                <li><a href="#">خواب</a></li>
                <li><a href="#">کار</a></li>
                <li><a href="#">تفریح</a></li>
            </ul>
        </li>
        <li class="level1">گردش کاری
	        <ul>
                <li><a href="#">تهران</a></li>
                <li><a href="#">کرج</a></li>
            </ul>
        </li>
    </ul>

همانطور که میبینید درخت ما فاقد هر گونه استایلی میباشد.حال  از کد Jquery  زیر استفاده میکنیم.

$(function () {
    $('#Decor ul').hide(600);
 
    $('#Decor li').on('click', function (e) {
        e.stopPropagation();
        $(this).children('ul').slideToggle();
    });
});

$('#Decor ul').hide(600);

این کد زمان 600 میلی ثانیه را در نظر میگیرد و همه زیر شاخه ها را مخفی میکند.

$('#Decor li').on('click', function (e) {
    e.stopPropagation(); // prevent links from toggling the nodes
    $(this).children('ul').slideToggle();
});

در اینجا ما رویداد کلیک را داریم برای کلیک روی هر ایتم li. 

برای راه انداختن این کد منابع Jquery مورد نیاز است.