<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="spiler_menu"> <div class="row"> <div class="span3"> <ul class="cats"> <h2> <a href="/catalog/category/tovary_dlya_zhivotnykh/">Товары для животных</a> </h2> <li> <a href="/catalog/category/korm_dlya_sobak/">Корм для собак</a> </li> <li> <a href="/catalog/category/korma_dlya_sobak/">Корма для собак</a> </li> <li> <a href="/catalog/category/korm_dlya_koshek/">Корм для кошек</a> </li> <li> <a href="/catalog/category/cat_zakuski/">Cat закуски</a> </li> <li> <a href="/catalog/category/tovary_dlya_koshek_i_sobak/">Товары для кошек и собак</a> </li> <li> <a href="/catalog/category/vse_dlya_gruminga/">Все для груминга</a> </li> <li> <a href="/catalog/category/tovary_dlya_zdorovya_koshek_i_sobak/">Товары для здоровья кошек и собак</a> </li> <li> <a href="/catalog/category/lekarstvennye_sredstva_dlya_koshek_i_sobak/">Лекарственные средства для кошек и собак</a> </li> <li> <a href="/catalog/category/odezhda_i_aksessuary_dlya_domashnikh_zhivotnykh/">Одежда и аксессуары для домашних животных</a> </li> <li> <a href="/catalog/category/igrushki_dlya_zhivotnykh/">Игрушки для животных</a> </li> </ul> </div> <div class="span3"> <ul class="cats"> <h2> <a href="/catalog/category/tovary_dlya_zhivotnykh/">Товары для животных</a> </h2> <li> <a href="/catalog/category/korm_dlya_sobak/">Корм для собак</a> </li> <li> <a href="/catalog/category/korma_dlya_sobak/">Корма для собак</a> </li> <li> <a href="/catalog/category/korm_dlya_koshek/">Корм для кошек</a> </li> <li> <a href="/catalog/category/cat_zakuski/">Cat закуски</a> </li> <li> <a href="/catalog/category/tovary_dlya_koshek_i_sobak/">Товары для кошек и собак</a> </li> <li> <a href="/catalog/category/vse_dlya_gruminga/">Все для груминга</a> </li> <li> <a href="/catalog/category/tovary_dlya_zdorovya_koshek_i_sobak/">Товары для здоровья кошек и собак</a> </li> <li> <a href="/catalog/category/lekarstvennye_sredstva_dlya_koshek_i_sobak/">Лекарственные средства для кошек и собак</a> </li> <li> <a href="/catalog/category/odezhda_i_aksessuary_dlya_domashnikh_zhivotnykh/">Одежда и аксессуары для домашних животных</a> </li> <li> <a href="/catalog/category/igrushki_dlya_zhivotnykh/">Игрушки для животных</a> </li> </ul> </div> <div class="span3"> <ul class="cats"> <h2> <a href="/catalog/category/tovary_dlya_zhivotnykh/">Товары для животных</a> </h2> <li> <a href="/catalog/category/korm_dlya_sobak/">Корм для собак</a> </li> <li> <a href="/catalog/category/korma_dlya_sobak/">Корма для собак</a> </li> <li> <a href="/catalog/category/korm_dlya_koshek/">Корм ​​для кошек</a> </li> <li> <a href="/catalog/category/cat_zakuski/">Cat закуски</a> </li> <li> <a href="/catalog/category/tovary_dlya_koshek_i_sobak/">Товары для кошек и собак</a> </li> <li> <a href="/catalog/category/vse_dlya_gruminga/">Все для груминга</a> </li> <li> <a href="/catalog/category/tovary_dlya_zdorovya_koshek_i_sobak/">Товары для здоровья кошек и собак</a> </li> <li> <a href="/catalog/category/lekarstvennye_sredstva_dlya_koshek_i_sobak/">Лекарственные средства для кошек и собак</a> </li> <li> <a href="/catalog/category/odezhda_i_aksessuary_dlya_domashnikh_zhivotnykh/">Одежда и аксессуары для домашних животных</a> </li> <li> <a href="/catalog/category/igrushki_dlya_zhivotnykh/">Игрушки для животных</a> </li> </ul> </div> <div class="span3"> <ul class="cats"> <h2> <a href="/catalog/category/tovary_dlya_zhivotnykh/">Товары для животных</a> </h2> <li> <a href="/catalog/category/korm_dlya_sobak/">Корм для собак</a> </li> <li> <a href="/catalog/category/korma_dlya_sobak/">Корма для собак</a> </li> <li> <a href="/catalog/category/korm_dlya_koshek/">Корм ​​для кошек</a> </li> <li> <a href="/catalog/category/cat_zakuski/">Cat закуски</a> </li> <li> <a href="/catalog/category/tovary_dlya_koshek_i_sobak/">Товары для кошек и собак</a> </li> <li> <a href="/catalog/category/vse_dlya_gruminga/">Все для груминга</a> </li> <li> <a href="/catalog/category/tovary_dlya_zdorovya_koshek_i_sobak/">Товары для здоровья кошек и собак</a> </li> <li> <a href="/catalog/category/lekarstvennye_sredstva_dlya_koshek_i_sobak/">Лекарственные средства для кошек и собак</a> </li> <li> <a href="/catalog/category/odezhda_i_aksessuary_dlya_domashnikh_zhivotnykh/">Одежда и аксессуары для домашних животных</a> </li> <li> <a href="/catalog/category/igrushki_dlya_zhivotnykh/">Игрушки для животных</a> </li> </ul> </div> </div> </div> </div>

.spiler_menu { border: 1px solid red; pading: 0px; margin: 0px; -webkit-transition: max-height 0.5s; transition: max-height 0.5s; }

(function($){ $.fn.truncate = function(options) { var defaults = { height: 300, minTrail: 20, moreText: "more", lessText: "less", ellipsisText: "..." }; var options = $.extend(defaults, options); return this.each(function() { obj = $(this); if(obj[0].clientHeight > (options.height + options.minTrail)) { obj[0].style.maxHeight = options.height + 'px'; obj[0].style.overflow ='hidden'; // insert more link obj.after( '<div class="clearboth">' + '<a href="#" class="truncate_more_link">' + options.moreText + '</a>' + '</div>' ); // set onclick event for more/less link var moreLink = $('.truncate_more_link'); moreLink.click(function() { console.log('1111'); if(moreLink.text() == options.moreText) { obj[0].style.maxHeight ='500px'; obj[0].style.overflow ='auto'; moreLink.text(options.lessText); } else { obj[0].scrollTop = 0; obj[0].style.maxHeight = options.height + 'px'; obj[0].style.overflow ='hidden'; moreLink.text(options.moreText); } return false; }); } }); }; })(jQuery); $().ready(function() { $('.spiler_menu').truncate( { height: 320, minTrail: 10, moreText: 'show more', lessText: 'show less', }); });