Bootstrap Snippet spoiler menu using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
.spiler_menu {
    border: 1px solid red;
    pading: 0px;
    margin: 0px;
    -webkit-transition: max-height 0.5s;
    transition: max-height 0.5s;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"spoiler menu"
Bootstrap 2.3.2 Snippet by Shutik

Related: See More

Questions / Comments:

"spoiler menu" Bootstrap 2.3.2 Snippet by Shutik

Related: See More

Questions / Comments:

"spoiler menu"
Bootstrap 2.3.2 Snippet by Shutik