"Collapsible Tree Menu"
Bootstrap 2.3.2 Snippet by rashed162

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="well" style="width:300px; padding: 8px 0;"> <div style="overflow-y: scroll; overflow-x: hidden; height: 500px;"> <ul class="nav nav-list"> <li><label class="tree-toggler nav-header">আকীদা</label> <ul class="nav nav-list tree"> <li><label class="tree-toggler nav-header">ঈমান</label> <ul class="nav nav-list tree"> <li><a href="#">আল্লাহর প্রতি ঈমান</a></li> <li><a href="#">ফেরেশতাগণের প্রতি ঈমান</a></li> <li><a href="#">আসমানী গ্রন্থসমূহের প্রতি ঈমান</a></li> <li><a href="#">রাসূলগণের প্রতি ঈমান</a></li> <li><label class="tree-toggler nav-header">শেষদিবসের প্রতি ঈমান এবং কিয়ামতের আলামত</label> <ul class="nav nav-list tree"> <li><a href="#">কবরের শাস্তি ও শান্তির প্রতি ঈমান</a></li> <li><a href="#">জান্নাত ও জাহান্নাম</a></li> <li><a href="#">কিয়ামতের আলামত</a></li> </ul> </li> <li><a href="#">তাকদীরের প্রতি ঈমান</a></li> <li><a href="#">জিন, যাদু ও বদ নজরের প্রতি ঈমান</a></li> </ul> </li> <li><label class="tree-toggler nav-header">তাওহীদ (আল্লাহর এককত্ব)</label> <ul class="nav nav-list tree"> <li><a href="#">রুবুবিয়্যত (রব্ব হিসেবে আল্লাহর এককত্ব)</a></li> <li><a href="#">উলুহিয়্যত (উপাসনায় আল্লাহর এককত্ব)</a></li> <li><a href="#">আসমা ও সিফাত (নাম ও গুণে আল্লাহর এককত্ব)</a></li> </ul> </li> <li><a href="#">বন্ধুত্ব ও মুক্ততা</a></li> <li><a href="#">শিরক ও এর প্রকারসমূহ</a></li> <li><label class="tree-toggler nav-header">বিভিন্ন মতবাদ ও ধর্ম</label> <ul class="nav nav-list tree"> <li><a href="#">বিভিন্ন মতবাদ ও ফেরকা</a></li> <li><a href="#">বিভিন্ন ধর্ম</a></li> </ul> </li> </ul> </li> <li class="divider"></li> <li><label class="tree-toggler nav-header">কুরআন ও কুরআনের জ্ঞানসমূহ</label> <ul class="nav nav-list tree"> <li><a href="#">কুরআনের তাফসির</a></li> <li><a href="#">কুরআনের ফজিলত</a></li> <li><a href="#">মুসহাফ সংক্রান্ত বিধিবিধান</a></li> </ul> </li> <li class="divider"></li> <li><label class="tree-toggler nav-header">হাদিস ও হাদিসের জ্ঞানসমূহ</label> <ul class="nav nav-list tree"> <li><a href="#">হাদিসের পরিভাষা</a></li> <li><a href="#">দুর্বল হাদিস</a></li> </ul> </li> <li class="divider"></li> <li><label class="tree-toggler nav-header">জিহাদ</label> <ul class="nav nav-list tree"> <li><a href="#">জিহাদ এর মাসায়েল</a></li> </ul> </li> <li class="divider"></li> <li><label class="tree-toggler nav-header">ইবাদত</label> <ul class="nav nav-list tree"> <li><label class="tree-toggler nav-header">পবিত্রতা</label> <ul class="nav nav-list tree"> <li><a href="#">ওজু</a></li> <li><a href="#">গোসল</a></li> <li><a href="#">নাপাকি দূরীকরণ</a></li> </ul> </li> <li><label class="tree-toggler nav-header">সালাত</label> <ul class="nav nav-list tree"> <li><label class="tree-toggler nav-header">সালাতের বিধিবিধান</label> <ul class="nav nav-list tree"> <li><a href="#">সালাতের শর্তাবলী</a></li> <li><a href="#">সালাতের ওয়াজিবসমূহ</a></li> <li><a href="#">সালাত আদায়ের পদ্ধতি</a></li> <li><a href="#">নামাযের সুন্নতসমূহ</a></li> </ul> </li> <li><a href="#">সালাত ত্যাগকারী</a></li> <li><a href="#">কাযা সালাত আদায়</a></li> <li><a href="#">সালাতের সময়সূচী</a></li> <li><a href="#">আযান</a></li> <li><a href="#">মসজিদের বিধিবিধান</a></li> <li><a href="#">সালাতে ভুল হলে</a></li> <li><a href="#">মুসাফিরের সালাত</a></li> <li><a href="#">সালাতে কুরআন তেলাওয়াত</a></li> <li><a href="#">জামাতে সালাত পড়া</a></li> <li><a href="#">নফল সালাত</a></li> <li><label class="tree-toggler nav-header">বিভিন্ন উপলক্ষ্যকেন্দ্রিক নামাযিধান</label> <ul class="nav nav-list tree"> <li><a href="#">জুমার নামাযাবলী</a></li> <li><a href="#">দুই ঈদের নামাযমূহ</a></li> </ul> </li> </ul> <li><label class="tree-toggler nav-header">যাকাত</label> <ul class="nav nav-list tree"> <li><a href="#">কোন কোন সম্পদে যাকাত ফরজবলী</a></li> <li><a href="#">যাকাত প্রদানের খাতসমূহযমূহ</a></li> <li><a href="#">যাকাত ফরজ হওয়ার শর্তাবলীযমূহ</a></li> <li><a href="#">ফিতরা</a></li> <li><a href="#">সদকা</a></li> </ul> </li> </ul> </li> <li class="divider"></li> <li><label class="tree-toggler nav-header">পারিবারিক ফিকাহ</label> <ul class="nav nav-list tree"> <li><a href="#">বিবাহের শর্তাবলী</a></li> <li><a href="#">বিবাহ চুক্তি</a></li> <li><a href="#">বিবাহের বিধিবিধান</a></li> <li><a href="#">বিয়ের প্রস্তাবনা</a></li> <li><a href="#">মোহরেম ব্যক্তিবর্গ</a></li> <li><a href="#">যেসব বিবাহ বাতিল</a></li> <li><a href="#">স্বামী-স্ত্রীর দাম্পত্যজীবন</a></li> <li><a href="#">স্বামী-স্ত্রীর অধিকার</a></li> <li><a href="#">দুগ্ধপান করানো</a></li> <li><a href="#">স্ত্রীর ভরণপোষণ</a></li> </ul> </li> <li class="divider"></li> <li><label class="tree-toggler nav-header">ইতিহাস ও জীবনী</label> <ul class="nav nav-list tree"> <li><a href="#">ব্যক্তির মর্যাদা</a></li> <li><a href="#">সিরাত</a></li> <li><a href="#">সৃষ্টির সূচনা ও অদ্ভুত সব সৃষ্টি</a></li> </ul> </li> <li class="divider"></li> <li><label class="tree-toggler nav-header">সৎ কাজের আদেশ ও অসৎ কাজের নিষেধের বিধিবিধান</label> <!-- <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul>comment--> </li> <li class="divider"></li> <li><label class="tree-toggler nav-header">শিক্ষা ও প্রশিক্ষণ</label> <ul class="nav nav-list tree"> <li><a href="#">সন্তান প্রতিপালন</a></li> <!-- <li><label class="tree-toggler nav-header">Header 1.1</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><label class="tree-toggler nav-header">Header 1.1.1</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> </ul> </li>--> </ul> </li> <li class="divider"></li> <li><label class="tree-toggler nav-header">মানসিক ও সামাজিক সমস্যা</label> <ul class="nav nav-list tree"> <li><a href="#">সামাজিক সমস্যা</a></li><!-- <li><a href="#">Link</a></li> <li><label class="tree-toggler nav-header">Header 1.1</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><label class="tree-toggler nav-header">Header 1.1.1</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> </ul> </li>--> </ul> </li> <li class="divider"></li> <li><label class="tree-toggler nav-header">ইসলামী রাজনীতি</label> <ul class="nav nav-list tree"> <!-- <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><label class="tree-toggler nav-header">Header 1.1</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><label class="tree-toggler nav-header">Header 1.1.1</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> </ul> </li> --> </ul> </li> <li class="divider"></li> <li><label class="tree-toggler nav-header">শিষ্টাচার, আখলাক ও অন্তর পরিচর্যা</label> <ul class="nav nav-list tree"> <li><label class="tree-toggler nav-header">অন্তর পরিচর্যা</label> <ul class="nav nav-list tree"> <li><a href="#">তওবার বিধানাবলী</a></li> <li><a href="#">আল্লাহকে ভালবাসা</a></li> <li><a href="#">জিহ্বার গুনাহসমূহ</a></li> <li><a href="#">শরিয়ত অনুমোদিত দুআ</a></li> <li><a href="#">তওবা</a></li> <li><a href="#">দুআ</a></li> <li><a href="#">ফাজায়েলে আমল</a></li> </ul> </li> <li><label class="tree-toggler nav-header">শিষ্টাচারসমূহ</label> <ul class="nav nav-list tree"> <li><a href="#">কুরআন তেলাওয়াতের শিষ্টাচার</a></li> <li><a href="#">সালামের শিষ্টাচার</a></li> <li><a href="#">ঘুমের শিষ্টাচার</a></li> <li><a href="#">বিবাহের শিষ্টাচার</a></li> <li><a href="#">ইসলামি ভ্রাতৃত্ববোধ</a></li> <li><a href="#">বিপরীত লিঙ্গের দুইজনের মাঝে সম্পর্ক</a></li> <li><a href="#">পিতা-মাতার সাথে সদ্ব্যবহার</a></li> <li><a href="#">আত্মীয়তার সম্পর্ক রক্ষা</a></li> <li><a href="#">সফরের শিষ্টাচার</a></li> </ul> </li> <li><label class="tree-toggler nav-header">আখলাক</label> <ul class="nav nav-list tree"> <li><a href="#">সৎ গুণাবলী</a></li> <li><label class="tree-toggler nav-header">অসৎ গুণাবলী</label> <ul class="nav nav-list tree"> <li><a href="#">প্রেম ও যৌনাচার</a></li> </ul> </ul> </li> </li> <li class="divider"></li> <li><label class="tree-toggler nav-header">ইসলামী আইন ও এর মূলনীতি</label> <ul class="nav nav-list tree"> <li><label class="tree-toggler nav-header">ইসলামী আইনের মূলনীতি</label> <ul class="nav nav-list tree"> <li><a href="#">ইসলামী আইনের উৎসসমূহ</a></li> <li><a href="#">বিদআত</a></li> <li><label class="tree-toggler nav-header">ইসলামী আইন</label> <ul class="nav nav-list tree"> <li><a href="#">ইবাদত</a></li> <li><a href="#">লেনদেন</a></li> <li><a href="#">বিচার বিভাগীয় দণ্ড ও শাস্তি</a></li> <li><a href="#">ফৌজদারি আইন</a></li> <li><a href="#">বিভিন্ন অভ্যাস</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="divider"></li> <li><label class="tree-toggler nav-header">ইলম ও দাওয়াত</label> <ul class="nav nav-list tree"> <li><label class="tree-toggler nav-header">দাওয়াত</label> <ul class="nav nav-list tree"> <li><a href="#">সলমানদের মাঝে দাওয়াতী কাজ</a></li> <li><a href="#">অমুসলিমদের মাঝে দাওয়াতী কাজ</a></li> <li><a href="#">দাওয়াতের মাধ্যমসমূহ</a></li> <li><a href="#">সৎ কাজের আদেশ ও অসৎ কাজের নিষেধ সংক্রান্ত বিধিবিধান</a></li> </ul> </li> <li><label class="tree-toggler nav-header">ইলম</label> <ul class="nav nav-list tree"> <li><a href="#">ইলম অর্জন</a></li> </ul> </li> </ul> </li> <li class="divider"></li> </ul> </div> </div> </div> </div>
$(document).ready(function () { $('label.tree-toggler').click(function () { $(this).parent().children('ul.tree').toggle(300); }); });

Related: See More


Questions / Comments: