Форум Сайтостроение Веб-строительство

Прошу помочь свернуть скриптом такой текст

12
P
На сайте с 06.01.2009
Offline
592
postavkin
973

Здравствуйте.

На странице есть код 


<p>Текст предложение №1. Текст предложение №2. Текст предложение №3. Текст предложение №4. Текст предложение №5. Текст предложение №6. Текст предложение №7.</p>



<p>Текст предложение №8. Текст предложение №9. Текст предложение №10. Текст предложение №11. Текст предложение №12. Текст предложение №13. Текст предложение №14.</p>

Реально ли свернуть все что после "№2. " и сделать "читать далее...", нажав на которую развернется все остальное ?

Я могу сделать только если код привести в такой вид, что мне не очень нравится. 


<p>Текст предложение №1. Текст предложение №2.</p><p class="skryto">читать далее...</p><div class="bigspisoktable"><p>Текст предложение №3. Текст предложение №4. Текст предложение №5. Текст предложение №6. Текст предложение №7.</p>



<p>Текст предложение №8. Текст предложение №9. Текст предложение №10. Текст предложение №11. Текст предложение №12. Текст предложение №13. Текст предложение №14.</p>

</div>

Спасибо

Ragnarok
На сайте с 25.06.2010
Offline
226
Ragnarok
#1

http://jedfoster.com/Readmore.js/

//TODO: перестать откладывать на потом
P
На сайте с 06.01.2009
Offline
592
postavkin
#2
Ragnarok:
http://jedfoster.com/Readmore.js/

Спасибо, только вот понять не могу, куда прописывать The options: и можно ли обойтись без a href ?

Важно - для ПС текст в исходном состоянии должен быть развернут.

---------- Добавлено 29.10.2015 в 19:14 ----------

Кто то может помочь разобраться? Мне самому не справиться! Спасибо заранее.

Всё получилось, сделал.

Одна проблема, код конечно длинноват ((

Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#3

postavkin, решение https://jsfiddle.net/s75z2x4m/

siv1987
На сайте с 02.04.2009
Offline
427
siv1987
#4
postavkin:
Я могу сделать только если код привести в такой вид, что мне не очень нравится.

И чем же не устраивает?

P
На сайте с 06.01.2009
Offline
592
postavkin
#5
siv1987:
И чем же не устраивает?

Дело в том, что тогда надо данный контент делить на предложения, брать, например первые 2 выводить, потом ставить <p>читать далее... и т.д.

И так в каждом документе, а документов 1200.

Нагружать сервер не хочется + в "Оригинальные тексты" яндекса текст добавлен без "читать далее..", смешно конечно, но тем не менее.

---------- Добавлено 29.10.2015 в 20:04 ----------

Сделал, как прислал ссылку Ragnarok

Но ещё раз повторюсь, код получился длинный в js

+ вот это


$(document).ready(function(){
$('article').readmore({
collapsedHeight: 78,
speed: 200
});
});

, что не гут, но другого варианта пока не нашел.

Или я ошибаюсь и код абсолютно нормальный? Это единственное, на самом деле, что меня смущает в данном варианте.

---------- Добавлено 29.10.2015 в 20:08 ----------

Gerga:
postavkin, решение https://jsfiddle.net/s75z2x4m/

Спасибо. Не совсем подходит, так как добавляются абзацы. Я писал выше, хотелось бы текст сохранить в исходном виде, как он добавлен в "Оригинальные тексты".

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

А в вашем варианте (да и в моем) придется оставлять один абзац открытым, сворачивать только остальные. Но первый абзац может оказаться весьма громоздким. Спасибо всем.

Ragnarok
На сайте с 25.06.2010
Offline
226
Ragnarok
#6
postavkin:
Спасибо, только вот понять не могу, куда прописывать The options: и можно ли обойтись без a href ?

Там же написан пример 

<script src="/bower_components/readmore/readmore.min.js"></script>

$('article').readmore({

  speed: 75,

  lessLink: '<a href="#">Read less</a>'

});
P
На сайте с 06.01.2009
Offline
592
postavkin
#7

Ragnarok, все сделал 5 дней назад. Сегодня обратил внимание, что есть такая проблема. Текст сворачивается после полной загрузки страницы, т.е. если текст длинный, то потом контент страницы "подпрыгивает" наверх.

Т.е. документ загрузился, пользователь уже смотрит фото товаров и тут такое дело.

Уже и в начало js переставлял и все что можно пробовал, косяк никак не убрать.

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

Код в странице


<div class="infos">
<div class="small"><p>Краткое описание серии, основная мысль.</p></div>
<div class="more">
<p>Длинная информация, например, в 3 абзаца- почему стоит купить именно этот товар, а не какой-нибудь иной.</p>
</div>
<span class="show">читать далее</span>
</div>

код js


if($('.infos').size()){
$('.infos .more').hide()
$('.infos .show').click(function(){
var str = 'свернуть'
if($(this).text()=='свернуть') str = 'читать далее'
$(this).text(str).prev().slideToggle('slow').parents('.infos').siblings('.infos').find('.more:visible').slideToggle('slow').next().text('свернуть')

return false
})
}
[Удален]
#8

postavkin, такой вариант устроит?

P
На сайте с 06.01.2009
Offline
592
postavkin
#9
burunduk:
postavkin, такой вариант устроит?

Алексей, спасибо за вариант. Но скорее всего нет, так как тоже придется делить абзац №1 на 2 куска, который выводится сразу и который в скрытой части. Конечно, если только придется отказаться от первого варианта из-за "подпрыгивания", то будем юзать.

Я написал Платонам наиглупейшее письмо, от их ответа зависит подходят ли варианты с делением контента или нет.


Подскажите, пожалуйста, если мы добавляем тексты в панель "Оригинальные Тексты" в таком формате

текст абзац №1

текст абзац №2


А в коде страницы данный текст будет разделен с помощью div вот так,
<div class="small"><p>кусок из абзаца №1 </p></div>
<div class="more">
<p>остальной кусок из абзаца №1</p>
<p>текст абзац №2</p>
</div>

ничего страшного? или лучше все таки в коде оставить в таком виде

<p>текст абзац №1</p>
<p>текст абзац №2</p>
totamon
На сайте с 12.05.2007
Offline
437
totamon
#10
postavkin:
Я написал Платонам наиглупейшее письмо

сами же понимаете что разметка страницы к тексту не имеет отношения...

Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий