<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 ----------> <div class="container"> <div class="row"> <ul id="my-menu"> <li><a href="#0">Главная</a></li> <li><a href="#0">О компании</a> <ul> <li><a href="#0">История</a></li> <li><a href="#0">Настоящее</a></li> <li><a href="#0">Будущее</a></li> </ul> </li> <li><a href="#0">Контакты</a></li> <li><a href="#0">Продукция</a> <ul> <li><a href="#0">Мясные продукты</a> <ul> <li><a href="#0">Колбаса</a></li> <li><a href="#0">Сосиски и сардельки</a></li> <li><a href="#0">Деликатесы</a></li> </ul> </li> <li><a href="#0">Алкоголь</a> <ul> <li><a href="#0">Вино</a></li> <li><a href="#0">Водка</a></li> <li><a href="#0">Пиво</a></li> </ul> </li> </ul> </li> </ul> </div> </div>

$(document).ready(function() { $('ul#my-menu ul').each(function(index) { $(this).prev().addClass('collapsible').click(function() { if ($(this).next().css('display') == 'none') { $(this).next().slideDown(200, function () { $(this).prev().removeClass('collapsed').addClass('expanded'); }); }else { $(this).next().slideUp(200, function () { $(this).prev().removeClass('expanded').addClass('collapsed'); $(this).find('ul').each(function() { $(this).hide().prev().removeClass('expanded').addClass('collapsed'); }); }); } return false; }); }); });