кнопка читать далее

Добрый день! Думаю хорошим решением будет добавить в функционал кнопку читать далее, которая в ленте новостей или постов, при выводе полного текста статьи укорачивала ее, показывая часть, потом сама кнопка при нажатии на которую выводился весь текст прямо в ленте.
В общем не силен в коде, но кое-что нашел, что можно применить:
Если вместо text review поставить свой div все работает, только не на всю ленту, а на первый пост.
Задача, как сделать, чтобы кнопка отрабатывала на все посты в одной ленте.
(подставлял в файлы шаблонов вывода контента), кроме того есть еще одна проблема, на сайте установлена автоподгрузка контента.
Прошу помощи в данном вопросе, или может у кого-нибудь имеется решение лучше! Спасибо!

instantcms.ru/addons/combo.html

Вот такой вот есть доделанный, без багов. Для автоматической установки пакет не собран, но если сможете ручками установить (просто файлы закинуть) то могу скинуть

Спасибо Вам за помощь! Буду пробовать!

GWK, там другой человек добавлял, и код нашел я, но я не смог его адаптировать под icms
instantcms.ru/blogs/chut-chut-blog/stil-spiska-dlja-tipa-kontenta-kombinirovanyi.html

Это вот убрать надо, смысл с него если оно все равно закоментировано

Пора бы уже подобные плюшки добавлять в саму сборку цмс, ну на крайняк как компоненты дополнения по разумной цене

GWK, у меня без этого куска все работает

instantcms.ru/users/hostelbeat и я — один и тот же человек. Я просто от старого аккаунта доступ утерял по глупости

ну дак тут админы дружелюбные, сделали бы новый)

Для начала в нужном виде вывода контента из папки templates/default/content добавляем примерно такой код:

Код PHP:
<div class="shadow" style="display: none"></div>
<a class="read-next" style="display: none;"><h3 style="text-align: center;"><span style="color: rgb(23, 54, 93);">ЧИТАТЬ ДАЛЕЕ</span><br>
</h3></a>
Ну и после этого в самом конце нужного вам вида контента добавляем это:

Код PHP:
<script>
 
$(document).ready(function(){
var hhh = 300;
$(".content_text .f_content").each(function(){
if ($(this).height() > hhh){
$(this).css("max-height", hhh+"px");
$(this).parent().parent().parent().find(".read-next").css("display", "inline");
$(this).parent().parent().parent().find(".shadow").css("display", "block");
}
});
 
$(".read-next").click(function(){
var block = $(this).parent().find(".content_text .f_content");
var shadow = $(this).parent().find(".shadow");
if (block.css("max-height") == hhh+"px"){
block.css("max-height", "");
shadow.css("display", "none");
$(this).text("Скрыть");
}else{
block.css("max-height", hhh+"px");
$(this).text("Читать полностью");
shadow.css("display", "block");
}
});
});
 
/*window.onload = function(){
  blok = document.getElementById('content_text');
  shadow = document.getElementById('shadow');
  parent = blok.parentNode;
  blok_height = blok.style.height? blok.style.height: blok.offsetHeight;
 
  if(blok_height > 400){
  blok.style.maxHeight = '400px';
  link = parent.getElementsByClassName('read-next')[0];
  link.style.display = 'inline';
 
  link.onclick = function(){
 
  if(blok.style.maxHeight){
  blok.style.maxHeight = '';
  shadow.style.display ='none';
  link.innerHTML = 'Скрыть';
  } else {
  blok.style.maxHeight = '400px';
  link.innerHTML = 'Читать далее...';
  shadow.style.display ='block';
  }
  return false;
  }
  }
  }*/
</script>

Множите по подробней объяснить что и как заменить чтоб все работало, потому если просто вставить код в default_list.tpl.php то нечего не происходить.

@nykolai, посмотрите пример реализации здесь: instantcms.ru/blogs/chut-chut-blog/stil-spiska-dlja-tipa-kontenta-kombinirovanyi.html

Скачал поставил, сам вид изменился как на скринах но кнопка читать полностью так и не появилась.

instantcms.ru/addons/combo.html

Вот такой вот есть доделанный, без багов. Для автоматической установки пакет не собран, но если сможете ручками установить (просто файлы закинуть) то могу скинуть

Если не сложно скиньте.

Скинул в лычку.

на днях подготовлю и выложу в дополнениях