"collapse-menu"
Bootstrap 3.3.0 Snippet by varun3129

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> </head><div class="container" id="accordion"> <div class="panel panel-default-small"> <div class="panel-heading"> <div class="panel-title"> <i class="indicator fa fa-chevron-right" style="font-size:14px;"></i><a data-toggle="collapse" href="#menuPanelListGroup" > <b> Overview </b> </a> </div> </div> <ul class="list-group collapse out" id="menuPanelListGroup"> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/API_Resources/Integration_Guide#AccesstoYodleeAPIs" target="_blank"> <span>Access To Yodlee APIs </span></a> <li class="list-group-item librePanelListGroupItem"> <span><a href="https://developer.yodlee.com/API_Resources/Using_Sandbox" target="_blank">Using Sandbox</a></span> </li> </ul> <div class="panel-heading"> <div class="panel-title"> <b> <a href="https://developer.yodlee.com/API_Resources/Integration_Guide#IntegrationModel" target=" _blank"><i class="fa fa-chevron-right" style="font-size:14px;">  <b>Integration Model</b> </i></a></b> </div> </div> <div class="panel-heading"> <div class="panel-title"> <i class="indicator fa fa-chevron-right" style="font-size:14px;"></i><a data-toggle="collapse" href="#menuPanelListGroup1" > <b> Authentication</b> </a> </div> </div> <ul class="list-group collapse out" id="menuPanelListGroup1"> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/API_Resources/Integration_Guide#CobrandAuthentication" target="_blank"> <span>Cobrand Authentication </span></a> <li class="list-group-item librePanelListGroupItem"> <span><a href="https://developer.yodlee.com/API_Resources/Integration_Guide#UserAuthentication" target="_blank">User Authentication</a></span> </li> </ul> <div class="panel-heading librePanelHeading"> <div class="panel-title"> <i class="indicator fa fa-chevron-right" style="font-size:14px;"></i> <a data-toggle="collapse" href="#menu2PanelListGroup" > <b>Accounts</b> </a> </div> </div> <ul class="list-group collapse out" id="menu2PanelListGroup"> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/API_Resources/Integration_Guide#LinkingAccounts" target="blank">Linking Accounts</a> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/API_Resources/Integration_Guide#UsingYodleeFastLink" target="blank">Using Yodlee FastLink</a> </li> <div class="panel-heading"> <li class="list-group-item librePanelListGroupItem"> <i class="indicator fa fa-chevron-right" style="font-size:14px;"></i><a data-toggle="collapse" href="#menu2PanelSubListGroup"> <b>Linking Accounts Using APIs</b> </a> </div> <ul id="menu2PanelSubListGroup" class="collapse librePanelSubListGroupItem"> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/API_Resources/Integration_Guide#LinkingAccountsUsingAPIs" target="_blank">Overview</a> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/API_Resources/Build_Login_Forms" target="_blank">Buildin Login Forms</a> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/API_Resources/Integration_Guide#MultifactorAuthentication" target="_blank">Multifactor Authentication</a> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/API_Resources/Integration_Guide#Webhooks" target="_blank">Webhooks</a> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/Account_ID_vs_Account_ID" target="_blank">ProviderID Vs AccountID</a> </li> </ul> </li> </ul> <div class="panel-heading librePanelHeading"> <div class="panel-title"> <i class="indicator fa fa-chevron-right" style="font-size:14px;"></i> <a data-toggle="collapse" href="#menu2PanelListGroup2" > <b>Aggregation</b> </a> </div> </div> <ul class="list-group collapse out" id="menu2PanelListGroup2"> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/Yodlee_API" target="_blank">Understanding Aggregation</a> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/API_Resources/Using_Sandbox" target="_blank">Using Sandbox</a> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/Yodlee_API/Getting_Started" target="_blank">Integration Steps</a> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/Yodlee_API/Data_Model" target="_blank">Data Model</a> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/Yodlee_API/FastLink_for_Aggregation">FastLink for Aggregation</a> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/API_Resources/Fetching_Accounts">Fetching Accounts</a> </li> <div class="panel-heading"><li class="list-group-item librePanelListGroupItem"> <i class="indicator fa fa-chevron-right" style="font-size:14px;"></i><a data-toggle="collapse" href="#menu2PanelSubListGroup2" > <b>Transactions</b> </a> </div> <ul id="menu2PanelSubListGroup2" class="collapse librePanelSubListGroupItem"> <li class="list-group-item librePanelListGroupItem"> <span><a href="https://developer.yodlee.com/Knowledge_Base/Transactions" target="_blank">Getting Transactions</a></span> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/Yodlee_API/Transaction_Categorization" target="_blank">Transaction Categorization</a> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/Yodlee_API/Transaction_Data_Enrichment" target="_blank">Transaction Data Enrichment</a> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/API_Resources/365_Days_of_Transacation" target="_blank">365 Days of Transaction</a> </li> </ul> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/API_Resources/Troubleshooting" target="_blank">Troubleshooting</a> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/API_Resources/Best_Practices" target="_blank">Best Practices</a> </li> <li class="list-group-item librePanelListGroupItem"> <a href="https://developer.yodlee.com/Yodlee_API/FAQ" target="_blank">FAQs</a> </li> </ul> </div> <style> .panel panel-default-small{ width:250px; } .panel-title{ font-size:14px;} .list-group-item{ width:200px; } .fa-chevron-right{ color:#0088cc;} .list-group-item{ display:block; margin-left:40px; } .list-group-item librePanelListGroupItem{ padding-left:30px; } </style> <script> function toggleChevron(e) { $(e.target) .prev('.panel-heading') .find("i.indicator") .toggleClass('fa-chevron-right fa-chevron-down'); } $('#accordion').on('hidden.bs.collapse', toggleChevron); $('#accordion').on('shown.bs.collapse', toggleChevron); </script>

Related: See More

Argon Design System
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments: