Как сделать — Кнопка читать дальше, читать меньше
Узнать, как создать кнопку «Читать больше — читать меньше» с помощью JavaScript.
Пример Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel . erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
Кнопка читать дальше читать меньше
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
Шаг 3) Добавить JavaScript:
Пример
function myFunction() <
var dots = document.getElementById(«dots»);
var moreText = document.getElementById(«more»);
var btnText = document.getElementById(«myBtn»);
if (dots.style.display === «none») dots.style.display = «inline»;
btnText.innerHTML = «Читать больше»;
moreText.style.display = «none»;
> else dots.style.display = «none»;
btnText.innerHTML = «Читать меньше»;
moreText.style.display = «inline»;
>
>
Как сделать кнопку читать далее?
Всем привет! Ребята прошу за глупый вопрос но как можно сделать вот такую кнопочку чтобы допустим сначала половина текста показывало а потом остальное? 
- Вопрос задан более трёх лет назад
- 6986 просмотров
Комментировать
Решения вопроса 1
xmoonlight @xmoonlight
https://sitecoder.blogspot.com
Целых три варианта:
1. DIV+CSS: overflow: hidden (по клику — убираем свойство hidden через JS)
2. Jquery: api.jquery.com/load (грузим с сервера динамически)
3. NewPage (делаем переход на полную версию публикации)
Ответ написан более трёх лет назад
Нравится 5 1 комментарий
HTML-элемент как кнопка
Урок №7
Элемент как кнопка
До этого мы рассматривали примеры, в которых событие запускающее функцию (обработчик события), являлось атрибутом кнопки — onclick=» » , однако события можно размещать не только в кнопках, но и в любых других элементах страницы, например в заголовке h1 :
function getChangeEl()Нажмите на заголовок
Изменяем внешность элемента на лету, нажав на ЗАГОЛОВОК!
Нажмите на заголовок и элемент изменится.
Данный скрипт показывает, что атрибуты событий можно разместить в любом элементе страницы.
кнопка читать далее
Добрый день! Думаю хорошим решением будет добавить в функционал кнопку читать далее, которая в ленте новостей или постов, при выводе полного текста статьи укорачивала ее, показывая часть, потом сама кнопка при нажатии на которую выводился весь текст прямо в ленте.
В общем не силен в коде, но кое-что нашел, что можно применить:
Если вместо text review поставить свой div все работает, только не на всю ленту, а на первый пост.
Задача, как сделать, чтобы кнопка отрабатывала на все посты в одной ленте.
(подставлял в файлы шаблонов вывода контента), кроме того есть еще одна проблема, на сайте установлена автоподгрузка контента.
Прошу помощи в данном вопросе, или может у кого-нибудь имеется решение лучше! Спасибо!
erni21
- Испытатели
- Сообщений: 33
#2 27 февраля 2018 в 00:06
Вот такой вот есть доделанный, без багов. Для автоматической установки пакет не собран, но если сможете ручками установить (просто файлы закинуть) то могу скинуть
Jestik
- Испытатели
- На орбите
- Сообщений: 3148
#3 27 февраля 2018 в 13:57
Спасибо Вам за помощь! Буду пробовать!
erni21
- Испытатели
- Сообщений: 33
Сегодня в 18:47
Реклама
#4 27 февраля 2018 в 15:07
GWK, там другой человек добавлял, и код нашел я, но я не смог его адаптировать под icms
instantcms.ru/blogs/chut-chut-blog/stil-spiska-dlja-tipa-kontenta-kombinirovanyi.html
Jestik
- Испытатели
- На орбите
- Сообщений: 3148
#5 27 февраля 2018 в 15:07
Это вот убрать надо, смысл с него если оно все равно закоментировано
Jestik
- Испытатели
- На орбите
- Сообщений: 3148
#6 27 февраля 2018 в 15:54
Пора бы уже подобные плюшки добавлять в саму сборку цмс, ну на крайняк как компоненты дополнения по разумной цене
Aliaksandr
- Испытатели
- Сообщений: 1091
#7 27 февраля 2018 в 22:03
GWK, у меня без этого куска все работает
instantcms.ru/users/hostelbeat и я — один и тот же человек. Я просто от старого аккаунта доступ утерял по глупости
GWK
ну дак тут админы дружелюбные, сделали бы новый)
Jestik
- Испытатели
- На орбите
- Сообщений: 3148
#8 1 марта 2018 в 13:44
Для начала в нужном виде вывода контента из папки templates/default/content добавляем примерно такой код:
Код PHP:
ЧИТАТЬ ДАЛЕЕ
Ну и после этого в самом конце нужного вам вида контента добавляем это:
$(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’;
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;
>
>
>*/
GWK
Множите по подробней объяснить что и как заменить чтоб все работало, потому если просто вставить код в default_list.tpl.php то нечего не происходить.