I found such an example http://jsfiddle.net/rashomon/8vLQ9/ .

$(document).ready(function() { var $dscr = $('.description'), $switch = $('.toggle-link'), $initHeight = 40; // Initial height $dscr.each(function() { $.data(this, "realHeight", $(this).height()); // Create new property realHeight }).css({ overflow: "hidden", height: $initHeight + 'px' }); $switch.toggle(function() { $dscr.animate({ height: $dscr.data("realHeight") }, 600); $switch.html("-"); }, function() { $dscr.animate({ height: $initHeight}, 600); $switch.html("+"); }); });

but for some unknown reason it does not work on the bitrix page

Are there any simple options for opening / hiding a block?

  • And on the necessary jquery is connected? for example 1.7.2 - user33274

2 answers 2

The code, as it turned out, works on the old man 1.4.4, you just need to use the archaic entry as jQuery, not $.

     .box { overflow: hidden; width: 300px; padding:10px; margin:auto; cursor: pointer; transition: 0.25s; max-height: 1000px; } .small { max-height: 10px; position:relative; } .small:after{ content:'+'; color:#fff; position:absolute; top:0;left:0; padding-left:10px; width:100%; height:100%; font-size:25px; background:#ccc; transition:0.25s; } 
     <!DOCTYPE HTML> <html lang="ru"> <head> <meta charset="UTF-8"> <title></title> <script src="https://angularlight.org/bin/alight_0.12.last.min.js"></script> </head> <body> <div al-app> <div class="box" al-class="small: small" @click="small=!small"> Есть несколько простыней текста\блоков на странице. Хочется чтобы по клику на стрелке вверх\вниз блок сворачивался до высоты 100рх. Есть идеи? Есть несколько простыней текста\блоков на странице. Хочется чтобы по клику на стрелке вверх\вниз блок сворачивался до высоты 100рх. Есть идеи? Есть несколько простыней текста\блоков на странице. Хочется чтобы по клику на стрелке вверх\вниз блок сворачивался до высоты 100рх. Есть идеи? Есть несколько простыней текста\блоков на странице. Хочется чтобы по клику на стрелке вверх\вниз блок сворачивался до высоты 100рх. Есть идеи? </div> </div> </body> </html>

    Look at this - it adds this text to the spoiler, Angulyar is applied.

    • so hides the whole block, but I need to show the first 5 lines - des1roer